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.
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.
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:
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.
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.
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:
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.
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
favicons
and robot.txt
here.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.
simple routing
This will automatically create a /
path which renders the index.vue
component and /about
which about.vue
component
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.
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.
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.
Similar to the async
method but the returned object is not merged with the data object of your page
component. 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.
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.
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.
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch