Generating static HTML website with Vue.js!

How does this work

@poi/plugin-vue-static is plugin that generates static HTML pages for you when you run poi build, thanks to vue-server-renderer.

In development mode, i.e. when running with the poi or poi develop command, you app will still be running as an SPA.


yarn add vue-router
yarn add @poi/plugin-vue-static --dev

How to use


  1. Add @poi/plugin-vue-static to config file
  2. Export Vue instance (without mounting) in entry file
  3. Use vue-router with history mode
  4. Ensure the id of root element is app

Config changes:

📝 poi.config.js:

module.exports = {
  entry: './index.js',
  plugins: [
      // The routes to generate
      // Only useful for `poi build`
      routes: ['/'] // default

App code changes:

📝 index.js:



import Vue from 'vue'
import router from './router'
import App from './App.vue'

const app = new Vue({
  // !! Must use vue-router !!
  render: h => h(App)

// Export the Vue instance
export default app

📝 App.vue:


  <!-- The id of outermost element must be set to `app` -->
  <div id="app">
    <router-view />

📝 router.js:


import Vue from 'vue'
import Router from 'vue-router'


export default new Router({
  // history mode is required!
  mode: 'history',
  routes: [
    // ...

Prefetching data

In a route component, do:

export default {
  // store is the Vuex instance
  // route is the current route
  async prepare({ store, route }) {
    await store.dispatch('fetchUser', route.params.username)

Your app will only be rendered when prepare is resolved.

Manipulating <head>

In any Vue component, do:

export default {
  name: 'HomePage',
  head: {
    title: 'Home - My Website'

It uses vue-meta under the hood.

Check out all supported properties in head option.

Plugin API



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

The list of routes to generate.