Using vue-router with vue-custom-element

I’m very new to Vue and am trying to create a Vue app that can be embedded inside a non Vue app. I am having trouble getting routing to work inside of my Vue app.

I have two components in my app - Schools and School.

in main.js I have this:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import vueCustomElement from 'vue-custom-element'
import Schools from "./components/Schools";
import School from "./components/Schools";

Vue.use(vueCustomElement);
const router = new VueRouter({
    routes: [
      { path: '/', component: Schools },
      { path: '/school', component: School },
    ]
  })
App.router = router;
Vue.customElement('schools-widget', App)

and then in my schools component (Schools.vue) I have

<router-link to="/school">School</router-link>

which I was hoping would link me from my Schools component to my School component.

But I get the error

Unknown custom element: <router-link> - did you register the component correctly?

Are you able to tell me what I am doing wrong?

[richardshergold]

Thank you for your help - someone helped me with an example and my code works now!

https://stackoverflow.com/questions/66624187/using-router-link-with-vue-custom-element

[karol-f]

Great!