Currently, I am working on a project that demands migration of vue.js application to nuxt.js because that vue application isn't up to mark for SEO. Since there is not much information available on the internet on this topic so how and what approach I am using, I am sharing here which would be the most convenient for your migration as well.

Before starting, I am assuming that you have some prior experience or at least know-how of how Nuxt works. (if you are from React background and have worked on Next.js then probably that wouldn't be so hard for you to grab the Nuxt.js concepts). You can read about Nuxt here on its official documentation

Create Nuxt Project

First off, you have to create the new nuxt project using

npx create-nuxt-app <project-name>

or if you use yarn

yarn create nuxt-app <project-name>

You can get more information about it here

Move your components

Usually, the Vue developers split their .vue files in two folders views and components. So, in my viewsfolder I have placed those .vue components that are pages and in the componentsfolder I have put those .vue components that are sub-components and reusable for me and are included in views folder.

If you don't use the same directory approach then you have to differentiate in pages and components and just copy the components files into your nuxt components folder.

Move your pages

After moving your components now just copy the pages from your views folder from vue project (if you have as mine project structure like views and components folder) and place them in your nuxt pages folder. Nuxt automatically generates the configuration of vue-router of your Vue files inside the pages directory. You can find more about this here at Routing and Views.

Change router-link

After placing all your components and pages in the right place then change your router-link to nuxt-link because nuxt uses different routing from Vue.

Fetch data from the server

You may want to fetch data from the server and render it on the server-side so you have to go through all your new pages and change the way you are making your API calls. Nuxt js uses asyncData method to handle asynchronous operations before initializing the component. If you were making API calls in your components in your Vue project and also following the same approach to fetch data here on the nuxt component then it won't work for you because nuxt components don't support or have asyncData method.

But this can be solved by these two solutions:

• Make your API call in the mounted hook but keep in mind this way server-side rendering won't work.

• Make your API calls in the asyncData or fetch method as mentioned in its official documentation.

Add Plugins

If you are using any external plugin/library then you must have to add it to your nuxt.config file. First you have to create a plugins folder in your root directory then add your external plugin like the below image

Then, you have to add the source of it in nuxt.config.js file like the below image

You can get more info about how to set up your plugins here

Move your store

Finally, if you are using Vuex in your project then you can copy your store file from Vue project and paste them to your nuxt project store folder. In my Vue project there is only one index.js file in my store folder but if you'd split down your store into multiple files then you can follow the instructions here at this link.

Now, we are done with the successful migration of our Vue to Nuxt project 😀.

For any queries, you can reach me on LinkedIn and follow me on Github.