Nuxt Fundamentals for Vue.js Developers
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!
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.
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 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.
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.
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
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.
Nuxt will automatically generate your application routing based on the components located here.
This directory is a direct mapping to the server root. You can store static files like
This is where your Vuex store files will be included, to enable Vuex, you need to create an index file inside.
That’s equivalent to your
vue.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.
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.
This will automatically create a
/ path which renders the
index.vue component and
You can also create more advanced routing structures by using nesting directories and using wild cards.
As you can see,
/child/1 will render
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
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.
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.
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.
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.
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.