Vue.js is a great choice as a framework for your application. But, there are a couple concerns you’ll likely run into:
These are some of the concerns that Sebastien and Alexandre Chopin set out to solve when they created Nuxt.js, a higher-level framework that’s built on top of Vue to help you build production-ready Vue applications.
I want to let you in 7 problems you’re going to run into building a Vue app, and tell you how Nuxt solves them.
Not only does Nuxt come preconfigured with Vuex, Vue Router, and Vue-Meta, but it sets your project up with intelligent defaults based on well researched best practices that Vue won’t give you out of the box.
Creating a Nuxt app is as easy as typing:
This Nuxt Starter Kit will ask you for the libraries you want to start your project with, such as CSS Lint, and which CSS framework to use.
As your application grows your code organization becomes more important. Vue’s default build gives you an assets and components directory, which is a good start. Nuxt.js sets you up with additional folders based on best practices, such as:
pages directory for your Application views and routes.
layouts directory for your layout templates.
store directory for your Vuex store files.
Nuxt ships with more folders and more default conventions which are all configurable, but you get the idea.
Since everything has its place, moving from one Nuxt application to another as a developer and getting up to speed is super simple.
With Nuxt, you simply place your single file Vue components into the pages folder and Nuxt automatically generates your routes with zero configuration.
This is just one more example of how Nuxt gives you the pre-configuration you need to create production-ready Vue applications. This leads us to the next problem with big applications…
Luckily, Nuxt ships with a production ready configuration that doesn’t lock you in. Meaning if you do you want to override any of the smart defaults or pre-configuration you can edit your nuxt.config.js file and modify any of the framework’s options.
You’re going to want certain pages of your app properly indexed by search engines so they’re easily discoverable.
One of the best solutions is to pre-render your Vue pages on the server, but this can be tricky to setup on your own. Nuxt is pre-configured to generate your application on the server, along with powering up your routes to make it easy to add SEO-related tags.
This makes for the optimal user experience.
When you are developing production-grade applications, at some point you’ll need to change the behavior of the framework. Nuxt provides a higher-order module system that makes it easy to customize every aspect of Nuxt.
So there you have it, 7 problems that Nuxt solves for you. As you can see, Nuxt.js allows you to spend less time on configuration, and more time solving problems and building awesome Vue apps.
To get started with Nuxt we recommend jumping into the great documentation, and consider downloading the Vue Mastery Nuxt cheat sheet. By doing this you’ll also be notified when we start releasing additional lessons of our Nuxt course.