Closed richardshergold closed 3 years ago
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.
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 :-)
Hi, You probably have to add router to Schools and School components - like You did with App:
App.router = router;
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)
Can you please prepare CodeSandbox?
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
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
Great!
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:
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?