If you are introducing Vue in existing project where html is being generated on server side, then below process will help in not loosing current SEO score of the site. We’ll be introducing Vue progressively in the project.
-
Wrap everything from first to last html element within
bodytag inside a new div with idvue-app. It will look like this<body><div id="vue-app"><!-- All Those Html Elements --></div></body> -
In your
app.jsor whichever is going to be your entry file for vue, instantiate Vue class and mount it tovue-appdiv. Something like thisnew Vue().$mount('#vue-app'). Make sure bundled/compiled js is loaded at the bottom of our html, preferably after#vue-appdiv. -
Start with creating components which are not trivial for SEO and register them globally using
Vue.componentapi, so that those components can be used anywhere in the project. -
Introduce Pre-Rendering in the project using softwares like prerender.io or rendertron into the project. prerender.io provides hosted solution too. If you are planning to host it yourself, I would recommend hosting it on a separate server. This will prepare the ground for components important for SEO as prerendering would help search engines crawl SEO components.
-
Start creating one SEO component and see how it performs. After it starts performing as per expectations, create more SEO components.
-
- *
REMAINING STEPS ARE OPTIONAL.
-
Now you can start looking into converting pages into SPAs
-
Once SPAs are created for all pages, introduce Server Side Rendering (SSR) in the project.
-
Once it is verified that SSR is working properly for all pages present in the project, get rid of Pre-Rendering software introduced in step 4.