Instead of generating a normal single-page app, it generates a static page for every route on your site, making it easier for you to configure search engine optimization and social sharing.
The following features are built-in to this project template:
- Generates a sitemap (for SEO)
- Generates a robots.txt (for SEO)
- Supports unique
<title>tags for each page (for SEO)
- Adds unique opengraph tags to each page (for social sharing)
- Adds Google Analytics support
- Adds a favicon
- Handles 404s
Benefits of pre-rendering
Search engine optimization
The primary benefit of this configuration is that it makes it easier to improve your site's search engine optimization. With a traditional Vue SPA, you can't set per-page attributes like the
<title> tag or the
<link rel="canonical"> tag, which search engines use to understand the structure of your website.
With pre-rendering, you can configure all the per-page elements so that they're present in your site's HTML when search engines index it.
Another major drawback of SPAs is that they have poor support for social sharing. Sites like Twitter, Facebook, and Pinterest require your pages to have HTML
With pre-rendering, each page on your site can have its own set of
<meta> tags, so you can customize the social sharing cards for all of your site's pages.
npm install npm run dev
Visit http://localhost:3700 to see the site running.
Deploying to production
To pre-render your website, run
npm install npm run generate
This will generate all the files for a static, pre-rendered version of your website under the
dist/ folder. You can upload these files to any service that suports static website hosting, such as:
The circleci-firebase branch of this repo includes an example configuration that automatically builds your site using Circle CI and deploys it to Firebase.
To customize this template for your project:
- Find/replace "https://pre-vue.web.app" with your app's base URL.
pre-vuewith your repo name.
.envwith your Google Analytics ID.
The live version of this project is at: