How to migrate a VueJs project to NuxtJs in 8 steps.
Tags: vue, nuxt, ssr, seo
Published: 2020-05-13 13:41:03

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](https://nuxtjs.org/))

###1. Create the nuxt project
First of all, create the nuxt project using `create-nuxt-app` . You can get more information  [here](https://nuxtjs.org/guide/installation#using-code-create-nuxt-app-code-).

###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](https://nuxtjs.org/guide/vuex-store).

###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](https://github.com/vuejs/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](https://nuxtjs.org/guide/routing) and [Views](https://nuxtjs.org/guide/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](https://nuxtjs.org/guide/async-data).

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](https://nuxtjs.org/guide/plugins#vue-plugins).

###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](https://nuxtjs.org/faq#global-settings).

---
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 both projects](https://dev-to-uploads.s3.amazonaws.com/i/at7lnjsjonk7bnuli9ue.png)

If you are wondering which was the project that I rebuilt with NuxtJs you can see it here: [KnowYourWorth](https://knowyourworth.app)

Let me know if you have any question or reach me out on twitter [@ngranja19](https://twitter.com/ngranja19)

Cheers