how to add a vue app??

[iceycc]

<template>
  <div>
    App 3 is working
    <p>comment me on and off to see HMR</p>
  </div>
</template>
<script>
export default {
    create(){
        console.log('vue===========================')
    }
}
</script>>

// app3.js
import './set-public-path';
import Vue from 'vue';
import App from './App.vue';
import singleSpaVue from 'single-spa-vue';
const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    render: h => h(App),
    el: '#app3',
  },
});
export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

// set-public-path.js
import { setPublicPath } from 'systemjs-webpack-interop'
setPublicPath('app3')

and

import * as singleSpa from 'single-spa';

singleSpa.registerApplication('app-1', () =>
  import ('../app1-react/app1.js'), pathPrefix('/app1'));
singleSpa.registerApplication('app-2', () =>
  import ('../app2-ag/app2.js'), pathPrefix('/app2'));
singleSpa.registerApplication('app-3', () =>
  import ('../app3-vue/app3.js'), pathPrefix('/app3'));
singleSpa.start();

function pathPrefix(prefix) {
  return function(location) {
    return location.pathname.startsWith(`${prefix}`);
  }
}

end error:

Uncaught Error: 'app-3' died in status LOADING_SOURCE_CODE: systemjs-webpack-interop: There is no such module 'app3' in the SystemJS registry. Did you misspell the name of your module?

[joeldenning]

In this example repo, there is a single webpack config for all applications. As such, you do not need to set the webpack public path for each application. You can delete the set-public-path.js file and everything should continue working.

The single-spa recommended setup recommends a separate repo and separate webpack configs for each application, which is why you may have come across example code that encourages setting the public path per application.

I am closing this, but feel free to comment further or reopen.