Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

nuxt

This course walks you through the steps of creating a News web app using Vue.js and the Nuxt framework. You will learn how to create dynamic pages for each section of your application and load, store, display, filter, and style the data. Then end result will be a News app with multiple category pages, comments for each section, and user pages.

The initial setup of a Nuxt project is pretty straight-forward, but as with any project you’ll want to make a few tweaks of your own to get started. This lesson walks through the setup process and a few minor adjustments to get the News app on the right track.

Start a Nuxt Project with npx and the Vue.js CLI

Many projects start by adding popular CSS libraries. Nuxt requires you to register the CSS library within the config so you can access the classes across you application. This lesson walks you through installing the Tachyons CSS library from npm, then adding it to your `nuxt.config.js`.

Add a CSS Library from npm to Nuxt

You can install libraries from npm as usual, but you need to be aware of the `vendor` property of your nuxt.config.js so that the library only gets loaded once with your application. This lesson walks you through the appropriate steps of adding axios to your project and setting it up as a vendor library in your nuxt.config.js.

Add JavaScript Libraries from npm to Nuxt

Every application requires data. Nuxt follows the patterns set forth in Vue.js by including Vuex by default. You only need to follow a simple convention to set up Vuex to help your store and access global data in your app. This lesson walks you through setting up the `store` directory and exposing data to be displayed in your pages.

Create a Vuex Store for Global Data in Nuxt

With axios installed, you can load data and store it into your Vuex store on the server-side before your app even renders. This lesson walks you through using axios to load data in a Nuxt news app and adding it to the store to display on any page.

Load Data into the Vuex Store in Nuxt

A common pattern in apps is to use the data from the url to modify which data is loaded. This lesson walks your through accessing and passing information from the router into your http request so that the appropriate data loads depending on which page you open.

Access the Router Params to Load Page-Specific Data in Vue.js and Nuxt

nuxt-link’s are used to build out clickable navigation in your application. This lesson walks through building a global navigation that you reuse across pages which allows the user to quickly navigate the news app.

Build Global Navigation with Layouts and nuxt-link in Nuxt

Adding a little flair to page transitions can help with the visual appeal of the app. This lesson walks you through using CSS transitions between pages to add a nice fade-in and fade-out page transition effect.

Create CSS Transition Effects in Vue.js and Nuxt

Every list needs a bit of styling to help the user know which items are visually important. This lesson walks through using styles isolated to a specific component to improve the look of the list.

Style a List and List Items in Vue.js and Nuxt

Vue.js filters need to run before your app starts. In Nuxt, you do this by adding the filter as a plugin then registering it with your nuxt.config.js. This lesson walks you through create a date filter to better visually format the time.

Register Vue.js Filters as Plugins in Nuxt

Your navigation should visually identify which page the user is currently visiting. This lesson walks through adding styles to the navigation element which matches the current page the user is viewing.


Style Navigation Based on Route in Nuxt

You often need to hide elements based on various conditions of your data. This lesson walks you through hiding the comments when no comments are available.

Display Only Available Data in Vue.js and Nuxt

Displaying data for a user who made a post or comment is a common scenario in app development. This lesson walks you through using user ids and setting up pages for the user to display the relevant information.

Display a User Data Page Based on id in Vue.js and Nuxt

Comments can have sub-comments which can have even more deeply nested comments. This lesson walks you through the process of loading data recursively by creating a Comment component which can load itself.


Create a News App with Vue.js and Nuxt

John Lindquist

Course Content