@poi/plugin-vue-static

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.

Installation

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

How to use

tl;dr

  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: [
    require('@poi/plugin-vue-static')({
      // 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 !!
  router,
  render: h => h(App)
})

// Export the Vue instance
export default app

📝 App.vue:



 




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

📝 router.js:








 





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

Vue.use(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

options

options.routes

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

The list of routes to generate.