Vue.js Tutorial: A Prerendered, SEO-Friendly Example

Here at Snipcart, we love Vue.js, but are entirely aware of the SEO issues with a Vue.js singe-page application.

In this tutorial, I want to show JS developers how easy it is to make Vue SEO-friendly.

Covering:

• General SEO tips you should always apply.
• Specific Vue.js SPA SEO issues.
• Tools to fix them with server-rendering & prerendering.
• A technical Vue.js SEO example using prerender-spa-plugin.

This repo contains the code for a demo e-commerce web app built with Vue.js 2.0 & Snipcart. For SEO purposes, prerendering is handled with prerender-spa-plugin.

Read full tutorial

See live demo

Enjoy folks!

---

Build Setup

# install dependencies
npm install

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.