Using vue-router with vue-custom-element

[richardshergold]

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?

[karol-f]

Hi, can't get to computer right now but it's because every vue-custom-element is separate Vue instance - so you have to define store, router etc for every component.

Search closed issues for router or store to see what it's like.

[richardshergold]

Hello - I searched but could not find the answer (I am very new to Vue so am probably not understanding some things) - maybe when you get a bit of time you could point me in the right direction! Many thanks :-)

[karol-f]

Hi, You probably have to add router to Schools and School components - like You did with App:

App.router = router;

[richardshergold]

Hi - I tried that but I got the same error so I then tried replacing my router-link with a button and performing the routing programatically. I now get the error

"Cannot read property 'push' of undefined:

when I click my School button on my Schools component.

So effectively this is the same problem I think - router not being available in my component.

This is my current code:

In my App.vue I have:

<template>
  <div id="app">
    <schools></schools>
  </div>
</template>

<script>
import Schools from "./components/Schools";

export default {
  name: "App",
  components: {
    Schools,
  },
};
</script>

My Schools component (Schools.vue) has this in:

<template>
  <div>
    <h1>Schools</h1>
    <button @click="school()">School</button>
  </div>
</template>

<script>
export default {
  methods: {
    school() {
      this.$router.push({ path: "/school" });
    },
  },

And my main.js has this in:

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;
Schools.router = router;
School.router = router;

Vue.customElement('schools-widget', App)

[karol-f]

Can you please prepare CodeSandbox?

[richardshergold]

Hi - never actually done that before but I just tried it. Here you go https://codesandbox.io/s/epic-gagarin-r1j8v?file=/src/App.vue

[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!