Vue.js has a first-class ecosystem to help construct Vue.js apps. This includes Nuxt.js which enables server-rendered applications and a page-based approach.
This course will start with an empty app and walk through how to use Vue.js for building the app, Nuxt.js for organizing the app, and Vuex for managing state.
The Vue-CLI helps you to quickly and easily setup new Vue projects. Nuxt.js is a library that helps you build server-rendered Vue.js applications. This lesson shows you how to use the nuxt/starter template with the Vue-CLI to quickly start a new project.
store directory. This lesson walks you through setting up a basic store and using it in your template
You commit changes to state in Vuex using defined
mutations. You can easily access these state mutations in your template using
mapMutations. This lesson shows you have to wire together your Vue.js template with your Vuex store using mutations and mapMutations.
You can easily add CSS libraries to Nuxt using
npm to install them, then simply adding them to the
nuxt.config.js so they're included in each page. Then all the classes will be available for use in all of your templates. This lesson walks your through installing a library then adding it to your
You add array of todos to the store simply by adding them to the
state defined in your
store/index.js file. You can access the array of todos using
mapState then loop through and display them with
v-for. This lesson walks you through the process of setting up todos in Vuex and displaying them in your Vue.js template.
You'll notice soon after working with Nuxt that you'll begin to see your styles flash in during each page load. This is due to the development mode of Nuxt where it injects the styles into the page after the initial page render. You can rest assured that when you use
nuxt build, your styles will render before the page loads.
In a server-rendered application, if you attempt to load data before the page renders and the data fails to load, your application will not run unless you handle the error properly. This lesson walks you through the options of handling load errors so that your users will always have a good experience.
Because Nuxt renders pages on the server, you should use the
nuxt-link components to navigate between pages. Each time a page loads, you can check if you're on the client or server and avoid doing unnecessary loading based on how the page was rendered. This lesson walks you through using
isClient to navigate and avoid reloading data.
The default behavior of submitting an HTML form is to reload the page. You can use the Vue.js
@submit.prevent syntax to avoid that behavior. Then wire together the
@submit event with an
add Vuex action to handle an async post to an api. This lesson walks you through posting to an API using Vue.js, Vuex. and Nuxt.
You'll begin to notice as you build out your actions in Vuex, many of them will look quite similar. Creating a remove action looks almost the same as the add action except for using the
axios.delete method then filtering out the deleted todo once the response comes back.
You can conditionally add classes to Vue.js templates using
v-bind:class. This will help display the status of a todo as you add a Vuex action to patch todos. This lesson walks you through setting up a toggle button that triggers a toggle action to patch todos in Vuex.
John Lindquist is a co-founder of egghead.io
John has spent the majority of his career developing Rich Web Applications. Before starting egghead.io, John worked at JetBrains as a WebStorm evangelist, and before that he was a Technical Architect at Isobar leading large teams in building the latest and greatest in web apps for the Air Force, HBO, and Bloomberg.