I have integrated Vaadin Router into my Vue application. Here is an example of what I am trying to achieve: Below is the content of my App.vue file:
<template>
<HelloWorld/>
</template>
<script>
import HelloWorld from './components/HelloWorld';
export default {
name: 'App',
components: {
HelloWorld,
}
};
</script>
And here is the content of my HelloWorld.vue file:
<template>
<div id = "outlet"></div>
</template>
<script>
import {Router} from '@vaadin/router';
const router = new Router(document.getElementById('outlet'));
router.setRoutes([
{path: '/', component: 'my-web-component-a'},
{path: '/other', component: 'my-web-component-other'}
]);
export default {
name: 'HelloWorld',
};
</script>
I have included the scripts for my web components in this application's index.html like so:
<script src = "../assets/my-web-component-a.js"></script>
<script src = "../assets/my-web-component-other.js"></script>
However, upon starting my Vue application, it runs but does not render the web components and throws the following error:
vaadin-router.js?7629:2007 Uncaught (in promise) TypeError: [Vaadin.Router] Expected router outlet to be a valid DOM Node (but got null)
at Router.__ensureOutlet (vaadin-router.js?7629:2007)
at Router.__addAppearingContent (vaadin-router.js?7629:2041)
at eval (vaadin-router.js?7629:1783)
Am I missing something? I am not very familiar with using Vaadin