Recently Derick Sozo and I worked closely with the Nuxt core team to produce the ultimate Nuxt intro video. This is also the first video in our Nuxt.js course we will be releasing over the next few weeks.
Vue.js is a great choice as a framework for your application. But, there are a few 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 while 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:
Nuxt ships with additional folders and default conventions that 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.
Luckily, Nuxt ships with a production-ready configuration that doesn’t lock you in. Meaning if 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 set up 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 our Nuxt course alongside our library of other Vue courses, over on VueMastery.com.
✅ 30s ad
Learn How to build enterprise Vue.js applications with Nuxt: Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). Nuxt goal is to make web development powerful and performant with a great developer experience in mind.
Responsive ecommerce template built with Vue.js and Nuxt.js
We want the best of both worlds. The SEO boost server-side rendering provides, and the speed of a Single Page Application. All this while hosted basically for free in a serverless environment on AWS Lambda. Here’s a quick overview of what we’ll be building for you to get up to speed. Feel free to jump to the step that interests you the most.