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)

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 /store folder 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 to 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?).

If you are wondering which was the project that I rebuilt with NuxtJs you can see it here: KnowYourWorth

Let me know if you have any question or reach me out on twitter @ngranja19

Cheers

Comments

[MiroslavTrninic]

Thanks for the article...
The best thing is that I don't need to remove Buefy from my frontend stack.
I have the same problem with SEO and Vue.
I am using Vue/Bulma/Buefy and Spring Boot in the backend.

[Firman Taruna Nugraha]

thanks, this article is really helpful

[Rishi U]

I was thinking about Nuxt, but put it off. All I needed from nuxt is the pre-rendering not ssr or anything else. hence I wonder if it makes sense to do this migration for a fairly large site.

there are other options for pre-rendering like rect-snap and a few others which I may look in to, do you have any other suggestions.

Rishi

[Froxx93]

This was very helpful for me. I didn't really know how to start, and this helped me getting a foot in the door. I really expected this whole thing to be way more difficult.
Thanks a lot!

[Nicolas Granja]

Hey, I'm glad it helps you. I was exactly in the same situation when I decided to give nuxt a try, and didn't find too much info about it, that's why I decided to document and gather all the info I found during the process. Cheers!

[Ben Herbst]

Hey, I wrote an updated article for Vue 3 and Nuxt 3:
benherbst.de/blog/3

[Prakhar Tiwari]

Hey I can't find the blog post, can you please share the correct link?

[Akpan Joseph]

Thanks a lot for this. I just want to ask how about the dependencies in package.json? how do we migrate that too?