How to migrate a VueJs project to NuxtJs in 8 steps.

A couple of months ago I built a project using my favorite stack: VueJs + Buefy for the Front-End and NodeJs + Express for the Back-End. Some days later the website started to gain some traction, and I got a lot of traffic, but as most of you might know, a VueJs SPA is not a good option for SEO, therefore I decided to rebuild it completely with NuxtJS.

Since searching on the web I was not able to find any documentation or tutorial of how to do it, I’ll try to explain step by step what I did. I tell you in advance that it is very easy and just takes a couple of hours, but I’m assuming you have some idea of how nuxt works (if is not your case, I highly recommend you to read the official documentation)

Nuxt.js - The Vue.js Framework

1. Create the nuxt project

First of all, create the nuxt project using create-nuxt-app . You can get more information here.

2. Copy your Stores

If you aren’t using Vuex in your VueJs project you can skip this step. If so, you can pretty much copy your store files to the new /storefolder in your nuxt project. In my case, I was just using an index.js file. In case you had split your store in modules you can follow these instructions.

3. Copy your Components

First, we have to differentiate what is a component and what is a page. I don’t know which directory structure are you using, but I usually split my .vue files into two folders: views and components . It is pretty obvious, but in the views folder, I put those vue components (.vue files) that are pages, i.e: About, Home, FAQ, etc. While in the components I put those subcomponents that I reuse - and are included - in the views.

In case you are not following a structure similar to this one, you’ll have to make this distinction, and just copy the components - that are not pages - to the corresponding new /components folder.

4. Create your Pages

This time, you should rethink your pages and recreate each route following the convention specified by Nuxt.

Nuxt.js automatically generates the vue-router configuration based on your file tree of Vue files inside the pages directory.

If you don’t have any idea fo how to do this, I recommend you to read the following sections of the official Nuxt documentation: Routing and Views.

5. Change router-link for nuxt-link

Once you have all your components and pages in the correct place, you will need to change all your router-link for nuxt-link. To see how nuxt is naming the routes you can check the automatically generated file inside /.nuxt/router.js

6. Change the way you fetch the data from your servers

You should go through all your new Pages, and refactor the way you were loading the data from your server.

You may want to fetch data and render it on the server-side. Nuxt.js adds an asyncData method to let you handle async operations before initializing the component

More information about asyncData here.

If you were also fetching data in your components and you are trying to use asyncData, this is won’t work, because components don’t have an asyncData method. But don’t worry, there are two solutions for this:

1. Make the API call in the mounted hook. Take in count that with this way the server-side rendering won’t work
2. Make the API call in the asyncData or fetch methods of the page component and pass the data as props to the sub-components.

7. Add your plugins

Go to your main.js file of your VueJs Project, and identify which plugins you are using. Then set up all your plugins following the instructions here.

8. Add the external resources

Finally, If you are using some external resources in the index.html file of your VueJs project, like stylesheets or an external js script, you can include them in the head object of nuxt.config.js. See more info here.

After doing all those changes, you can see how it looks like my new NuxtJs project compared to the old VueJs (pretty similar right?).

Directory Structure of my VueJs app (left) and the new NuxtJs (right)

If you are wondering which was the project that I rebuilt with NuxtJs you can see it here: https://knowyourworth.site

Find out if you are being paid fairly - KnowYourWorth

Let me know if you have any question or reach me out on twitter https://twitter.com/ngranja19

Thanks