@pigs/plugin-vue-static NPM

@pigs/plugin-vue-static

You might be familar with building a SPA using Vue, Vue Router and Pigs (webpack) already, here we're introducing a Pigs plugin that pre-renders each page of your SPA using vue-server-renderer at build time.

Install

Install this plugin in a Vue project:

yarn add @pigs/plugin-vue-static --dev

You should also have vue and vue-template-compiler installed in your project.

Now you can load this plugin in pigs.config.js:

module.exports = {
  entry: './src/index.js',
  plugins: [
    {
      resolve: '@pigs/plugin-vue-static'
    }
  ]
}

How to use

Entry file

With this plugin, you should export a function which returns an object in the entry file:

// src/index.js
import Router from 'vue-router'

export default () => {
  const router = new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        component: () => import('./pages/index.vue')
      }
    ]
  })

  // Returned object will be used as the options
  // for root Vue instance
  return {
    router
  }
}

Generate static website

By default it only render HTML for route / because we don't know what pages you want to statically render at build time. Here you can use staticRoutes to let us know:

// pigs.config.js
module.exports = {
  entry: './src/index.js',
  plugins: [
    {
      resolve: '@pigs/plugin-vue-static',
      options: {
        staticRoutes: ['/user/egoist', '/user/cristiano']
      }
    }
  ]
}

Then you will get index.html user/egoist/index.html and user/cristiano/index.html.

Options

staticRoutes

Type: string[]
Default: ['/']

resourceHints

Type: boolean
Default: true

Add prefetch and preload resource hints to <head>.

FAQ

How do I modify webpack config for specific build?

The chainWebpack option actually has a second argument:

// pigs.config.js
module.exports = {
  chainWebpack(config, { type }) {
    console.log(type)
  }
}

Without this plugin, type always equals to 'client'. When using vue-static plugin it will be 'server' for server build.

Notably:

There's only client build when running pigs --serve since it is still bundled as SPA.
Without the --serve flag Pigs will generate two builds, client build and server build.

How do I write code applying to client build only?

Via the environment variable in your app code:

if (process.server) {
  // this is the server build
}

if (process.client) {
  // alias: process.browser
  // this is the client build
  // you can safely access browser API here
  // like `window.document`
}

How do I manipulate head tags?

Via head option in your Vue component:

<script>
export default {
  head: {
    title: 'Page Title'
  }
}
</script>

This feature is powered by vue-meta under the hood, but here we are using head instead of the default metaInfo option.

Showcase

A list of websites built with vue-static:

Vue Land: website for Vue Land the official Vue.js Discord Community.

fs-extra html-minifier vue-meta vue-router vue-server-renderer webpack-node-externals

@infinitebrahmanuniverse/nolb-_pig @everything-registry/sub-chunk-718 @zalastax/nolb-_pig

12.0.6

7 years ago