Single-page (SPA) Prerendering

Get almost all the advantages of SSR, including near instant page load times, no flash of unstyled content, improved SEO and more, without the disadvantages of SSR. Most websites can benefit from pre-rendering without the need for SSR. Run the following command to build your application for production and generate HTML files for some routes or even all routes of your application. The build will be stored in the dist/ directory.

npm run generate

Run the Prerendered SPA production build of your application in your browser at http://localhost:8080/:

npm start

Prerender Configuration

Configure the routes for prerendering in vue.config.js. By default, we're loading all routes programmatically and generate the multi-layout routes used in the demo.

//////////////////////////////////////
// generate routes for prerendering //
// used with `npm run generate`     //
//////////////////////////////////////

const {
  routes
} = require('./src/router/routes')
const renderRoutes = []
const layouts = ['app', 'sticky', 'boxed', 'fixed']

routes
  // exclude routes with meta.auth
  .filter(route => !(route.meta && route.meta.auth))
  .map(route => {
    // generate /:layout/:page
    if (route.id === 'layout') {
      const layoutRoutes = route.children
        // exclude routes with meta.auth
        .filter(route => !(route.meta && route.meta.auth))
        .map(route => route.path)

      layouts.map(layout => layoutRoutes.map(route => renderRoutes.push(`/${layout}/${route}`)))
    }
    // top level routes
    else if (!route.children) {
      renderRoutes.push(route.path)
    }
  })

Table of Contents

Frontend Matter

Beautifully crafted Bootstrap themes and templates for modern web apps.

Themes

Templates

Company

Illustrations by Freepik Storyset