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)
First of all, create the nuxt project using
create-nuxt-app . You can get more information here.
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.
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:
/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
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
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
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
asyncDatamethod to let you handle async operations before initializing the component
More information about
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
But don’t worry, there are two solutions to this:
- Make the API call in the
mountedhook. Take in count that with this way the server-side rendering won’t work
- Make the API call in the
fetchmethods of the page component and pass the data as props to the sub-components.
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.
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