Nuxt.js is here to make your life easy, it's also here to make the Vue.js development process even nicer than it already is. But with all its good aspects, it has quirks that will have you click on every single link on Google.
This article is here to avoid these situations, it'll cover some normal use-cases and some edge-cases with quick and easy code snippets. It won't go into extreme detail on these matters, but will give you the documentation necessary to do so in case you want to.
Note: You'll need a good grasp of Vue.js concepts to take full advantage of this article !
Before we get into anything concrete, let me explain what Nuxt.js is.
It comes out of the box with loads of useful packages:
- 💻 Vue
- ↩️ Vue Router (for easy routing)
- 💾 Vuex (for easy state management)
- 🏎 Vue Server Renderer (for server-side rendering out of the box)
- 🕵️♂️ Vue meta (for SEO)
Here's a list of what we'll cover (feel free to come back here if you're searching for something specific):
- Creating a new route
- Creating dynamic routes
- Navigating to a route in a component template
- Navigating to a route programatically
- Displaying a fixed component throughout your app
- Changing a project's router base
- Handling internationalization (i18n)
- Importing a font to your project
If you have any other requests or want to add anything new, please feel free to hit me up on Twitter @christo_kade !
Creating a Nuxt.js project
Which will prompt you to answer some questions, including:
- Choose between integrated server-side frameworks (None by default, Express, Koa etc.)
- Choose features to install (PWA Support, Linter / Formatter, Prettier, Axios)
- Choose your favorite UI framework (None by default, Bootstrap, Vuetify, Bulma etc.)
- Choose your favorite testing framework (None, Jest, AVA)
- The Nuxt mode you want (Universal or SPA, more information)
Once done and your dependencies are installed:
Testing with Nuxt.js
The majority of your testing syntax will depend on the testing framework chosen during the project's creation.
Out of the box, Nuxt uses the
@vue/test-utils package to render your components thanks to multiple methods such as
render(). You'll then be able to test that specific values have been displayed, that specific methods were called etc.
Nuxt will also make sure to set everything up for you, all you'll have to do is create your
*.test.js files and run the
yarn test command.
Here's a classic (and brief) example of unit testing for a Vue component in a Nuxt project:
Creating a new route
/pages folder, create a file, its name will be the name of the route.
So for example:
localhost:3000/about will display this component's content
Creating dynamic routes
/pages folder, create a directory and a file prefixed by an underscore.
For example, the following file tree:
Will automatically generate the following router inside the
.nuxt folder whenever you build your project:
You can now navigate to
id being whatever value you need it to be.
To retrieve this value in your
_id.vue component, just do the following:
Documentation, including nested routes and dynamic nested routes.
Navigating to a route in a component template
Inside of any of your components:
Navigating to a route programatically
Creating a new store module
/store folder, each file is a Vuex module.
Each module's mutations, actions & states are now available using the context object
Updating a store before rendering a component
Sometimes you need to fill up a given state variable before rendering a component, here's how:
Warning: You don't have access of the component instance through
thisinside fetch because it is called before initiating the component (read more).
Changing a page's head properties dynamically
For SEO purposes, defining the page's title, description keywords etc. can be useful. Here's how you can do it programmatically:
Info: To avoid duplicated meta tags when used in child component, set up an unique identifier with the hid key for your meta elements (read more).
SSR for dynamic routes
nuxt generate, the HTML file for your dynamic routes won't be generated by default.
For example, if you have an
about.vue page and a
_id.vue one, when running
nuxt generate, the resulting
dist folder will contain
/about/index.html but won't generate anything for your dynamic
This can lead to your dynamic routes to be missed by crawlers, and therefore not referenced by search engines !
Here's how you can generate them automacially:
nuxt generate will now generate the HTML file for each dynamic route returned by the
Displaying a fixed component throughout your app
Sometimes you need to add a navbar or a footer that will be displayed no matter the current route.
/layout folder that contains
default.vue by default. This layout holds the
<nuxt/> component that takes care of rendering the content of each one of your pages (see Creating a new route).
Simply modify that component to fit your needs, for example:
Changing a project's router base
In some cases, when for example you're deploying your project on Github Pages under
username/my-project, you'll need to change the project's router base so that your assets are displayed correctly.
And don't forget to change your
package.json so that
nuxt.config.js knows when you're building or generating for Github Pages.
Handling internationalization (i18n)
Start by running
yarn add vue-i18n
Create the following file:
And add the following line in your
nuxt.config.js to inform it we're using that plugin:
In this example, the current locale is based on my store's content, which looks like so:
So whenever we call
setLanguage, the locale is automatically updated and the correct JSON file is loaded ! ✨
Your file contents are now available throughout your application like so:
Importing a font to your project
Alright, I believe that's enough for one article. I've covered lots of use-cases which hopefully will be useful to some of you.