vue-cli-plugin-prerender-multi-state

This plugin is based on vue-cli-plugin-prerender-spa but allows multiple initial Vuex states.

Install

vue add prerender-multi-state

Usage

Your Vuex store should follow following structure:

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: window.__INITIAL_STATE__ ? window.__INITIAL_STATE__.state : {
    hello: 'world'
  },
  mutations: {
 
  },
  actions: {
 
  },
  modules: {
    mod: {
      namespaced: true,
      state: window.__INITIAL_STATE__ ? window.__INITIAL_STATE__.modules.mod.state : {
        key: 'value'
      }
    }
  }
})

Configuration

This plugin will add a few entries to vue.config.js Following example will generate folders dist/default and dist/custom1 each with respective initial Vuex State

module.exports = {
  pluginOptions: {
    prerenderMultiState: {
      registry: undefined,
      renderRoutes: ['/', '/about'],
      async initialStates() {
        return {
          default: {
            state: {
              hello: 'World',
            },
            modules: {
              module1: {
                state: {
                  foo: 'bar'
                }
              },
            },
          },
          custom1: {
            state: {
              hello: 'World1',
            },
            modules: {
              module1: {
                state: {
                  foo: 'bar1'
                },
              },
            },
          },
        }
      },
    },
  },
}

states (can return Promise) should return a States object respecting this Typescript Interface:

interface State {
  state: Object
  modules?: {
    [key: string]: State
  }
}
interface States {
  [key: string]: State
}