Vue.js 3 and single-spa - how to add plugins like vuetify, axios ,

Question

I want to create a micro frontend demo with single spa and vue js 3. I set up the project and ran it. Now I want to add plugins like vuetify, axios and so on.

BUT - the main js is different from normal vue3 apps because of single spa - now I dont know how to add plugins.

My main js code:

import { h, createApp } from 'vue';
import singleSpaVue from 'single-spa-vue';
import App from './App.vue';


const vueLifecycles = singleSpaVue({
  createApp,
  appOptions: {
    render() {
      return h(App, {
        // single-spa props are available on the "this" object. Forward them to your component as needed.
        // https://single-spa.js.org/docs/building-applications#lifecycle-props
        // if you uncomment these, remember to add matching prop definitions for them in your App.vue file.
        /*
        name: this.name,
        mountParcel: this.mountParcel,
        singleSpa: this.singleSpa,
        */
      });
    },
  },
});

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

I already tried adding vuetify like this:

import { h, createApp } from 'vue';
import singleSpaVue from 'single-spa-vue';
import App from './App.vue';

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives,
})

const vueLifecycles = singleSpaVue({
  createApp,
  appOptions: {
    render() {
      return h(App, {
        // single-spa props are available on the "this" object. Forward them to your component as needed.
        // https://single-spa.js.org/docs/building-applications#lifecycle-props
        // if you uncomment these, remember to add matching prop definitions for them in your App.vue file.
        /*
        name: this.name,
        mountParcel: this.mountParcel,
        singleSpa: this.singleSpa,
        */
      });
    },
  },
});

createApp().use(vuetify)

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

I also tried A LOT of other methods but nothing worked ... I also tried: this stackoverflow solution

score 1 · Answer 1 · answered Apr 11 '23 at 18:24

1

try this:

const vueLifeCycles = singleSpaVue({
    createApp,
    addOptions: { render() { return h(App, {}) } },
    handleInstance: (app) => { app.use(vuetify) },
})

answered Apr 11 '23 at 18:24

Irith

93
14

THANKS !!! How do you expand this to work with Vuex or Vue-Router? Typically we have the `src/router/index.js` and `src/store/index.js` which has `Vue.use(VueRouter)` / `Vue.use(Vuex)`, but that fails with `died in status LOADING_SOURCE_CODE: Cannot read properties of undefined (reading 'use')` – rishimaharaj Jul 27 '23 at 19:18

Vue.js 3 and single-spa - how to add plugins like vuetify, axios ,

1 Answers1