Nuxt Fundamentals for Vue.js Developers
I’ve been working with Vue for several years and had heard a lot about Nuxt but never actually got my hands dirty with it. Thanks to my new job at Sharenow, I have finally started using Nuxt every day!
In this piece, I assume you’re proficient with Vue and want to get started with Nuxt. Our goal is to make getting starting and reading the official documentation a breeze.
Introduction to Nuxt
If we are going to learn Nuxt then we need to get the basics right first. Nuxt is a framework for Vue. In that sense, it’s a framework for a framework.
Bearing that in mind, this means that whatever you already knew about Vue, you will probably find to be true for Nuxt as well.
It’s important to understand that Nuxt is built on _top_of Vue. Essentially, you have a set functionality that is written by astonishing Vue developers for a few kilobytes.
Being so similar to Vue we will focus only on the stuff related to Nuxt only.
The Different Modes of Nuxt
1. Server-side rendering (SSR)
This is by far the most popular mode to use Nuxt in. You get a Node server that is serving HTML generated from your Vue components.
By using SSR you gain lots of benefits, such as SEO, performance gains, and more flexibility and capabilities since you have a node server under your command.
If you’re not sure whether you need an SSR application, here’s a guide for in-depth information for Vue SSR:
2. Statically generated (JAMstack)
If SSR is an overkill for your needs, and at the same time, you still want the benefits of prerendering you probably want to go with this choice.
This is basically what is recently referred to as the JAMstack, but done in a Vue flavor. You might be familiar with alternatives such as Gatbsy or Jekyll
Nuxt provides you with nuxt generate, a command which prerenders your routes (page components) to HMTL pages that are ready to be deployed to any hosting of your choice.
3. Single Page Application (SPA)
This is similar to what you are already familiar with. It’s a regular Vue application but built with Nuxt capabilities and configurations, enabling rapid development and more out-of-the-box features.
What’s Included in Nuxt?
Nuxt is an opinionated framework and it makes some excellent decisions for you. Additionally, it provides you with basic architecture guidelines for your application.
Some of the packages that are already included are:
- Vue
- Vue Router
- Vuex (configurable)
- Vue Server Side
- Vue Meta
- Webpack (Vue-loader, babel-loader)
As you can see, there is no magic here — it does the verbose/complex work for us while letting us configure it if we need to.
Deepen Your Understanding
Now that you have an overview of what Nuxt is and know how it differs from Vue, it’s time for us to get a deeper understanding of Nuxt’s internals.
In this section, we’ll be covering the Nuxt Schema, directory structure, and routing.
Nuxt schema
Remember Vue’s component life cycle? The Nuxt schema is similar. It gives you a top-level view of what happens when a request hits your Nuxt application.
The most important takeaway from this diagram is to understand that requests pass by several hooks on your server before they end up on the client.
With this concept in mind, we can move lots of operations to our server and leverage this power to give customers a better user experience.
Directory structure
Unlike in Vue, where the directory structure that you get using the vue-cli is just an opinion, Nuxt uses convention over configuration and some directories will have some magic behind them.
If you want to change any of these names you will have to also do a configuration change
- Layouts
Here, you place your base components. For instance, a page with a sidebar, a back-office page layout and your error pages such as 500s and 404s. - Pages
Nuxt will automatically generate your application routing based on the components located here. - Static
This directory is a direct mapping to the server root. You can store static files likefaviconsandrobot.txthere. - Store
This is where your Vuex store files will be included, to enable Vuex, you need to create an index file inside. - nuxt.config.js
That’s equivalent to yourvue.config.js, you can configure your Nuxt application and extend Webpack configurations.
The other directories are not part of the convention — they’re there to provide guidance and support you taking architectural decisions.
Routing
Nuxt routing is built on top of vue-route, the standard go-to routing solution for Vue applications.
I assume that while working on Vue applications, you’ve already created a router file a hundred times so you’ve probably have seen how redundant the process is.
That’s why Nuxt automates this for us and creates a route for every component in our page’s directory.
simple routing
This will automatically create a / path which renders the index.vue component and /about which about.vue component
Dynamic routing
You can also create more advanced routing structures by using nesting directories and using wild cards.
advanced routing
As you can see, /child/1 will renderindex/child/_id/index.vue
It’s impressive how far you can go with this convention — you can do some pretty complicated routing. If you want more control, you can refer to any router configuration file in your Nuxt configs.
New Concepts in Nuxt
1. Middlewares
These are equivalent to Navigation Guards in Vue. I wrote an article about this for an in-depth guide:
Navigation guards can be defined on application, page or component level giving you handful of layers of control. They can provide you with a very simplistic approach to share functionality, logic and make routing decisions within your application.
2. Async data
This is a method available only in pages components and is called once on the server on the first request and on further page navigations on the client.
The returned object will be automatically merged with the data object in your component. This is useful if you want to prepopulate initial data for your component on the server.
3. Fetch Method
Similar to the async method but the returned object is not merged with the data object of your pagecomponent. This method can be used to fetch data on the server and store it in your store.
4. Plugins
Not completely different from Vue’s plugins. A way to share common functionality across your application. You can write your own custom plugins or use existing Vue plugins.
One thing to note here is that Nuxt allows you to choose whether you want to run your plugin on client-only, server-only, or both. This is useful for plugins that don’t have SSR support.
5. Modules
Similar to plugins, Modules are a form of code reuse. Modules allow you to extend Nuxts core and reuse functionality in several parts of the application.
Nuxt’s Modularity allows you to write modules that can override templates, configure webpack loaders, add CSS libraries, and perform many other useful tasks.
There are several existing modules in the ecosystem including google tag manager, font awesome, and sentry.
6. Server middleware
Not to be confused with middleware, these are methods that run on the server before vue-server-renderer and can be used to handle API requests (logs) or serving assets.
7. nuxtServerInit
This is an action that can be defined in your vuex store. Nuxt automatically dispatches this action on the server with the context object as a second parameter.
This is useful when you want to pass data from the server to the client-side, like session information or environment configurations.
Full TypeScript Support
Unlike Vue, Nuxt comes with full Typescript support. This does not come out of the box and you have to implement it on your own starting Nuxt 2.8. Integrating nuxt/typescript-build is pretty straightforward.
Getting Started
If you have managed to make it to this part, congratulations. You are now ready to start developing your first Nuxt application.
You can use create-nuxt-app_, N_uxt’s CLI, by following the steps here and you will be set up in a few minutes.
Suggest:
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch