single-spa-vue

single-spa-vuejs

Generic lifecycle hooks for Vue.js applications that are registered as child applications of single-spa.

Example

In addition to this Readme, example usage of single-spa-vue can be found in the single-spa-examples project.

Quickstart

First, in the child application, run npm install --save single-spa-vue (or jspm install npm:single-spa-vue if your child application is managed by jspm). Then, in your child app's entry file, do the following:

import Vue from 'vue';
import singleSpaVue from 'single-spa-vue';

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    el: '#mount-location',
    template: '<div>some template</div>'
  }  
});

export const bootstrap = [
  vueLifecycles.bootstrap,
];

export const mount = [
  vueLifecycles.mount,
];

export const unmount = [
  vueLifecycles.unmount,
];

Options

All options are passed to single-spa-vue via the opts parameter when calling singleSpaVue(opts). The following options are available:

• Vue: (required) The main Vue object, which is generally either exposed onto the window or is available via require('vue') import Vue from 'vue'.
• appOptions: (required) An object which will be used to instantiate your Vue.js application. appOptions will pass directly through to new Vue(appOptions)