I'm currently working on setting up a navigation bar that spans my entire Vue application. Transitioning from React, I've been attempting to import my Navigation Component into main.ts and use it above the router outlet in App.vue. The application was initially created with vue-cli using TypeScript and Router.
So far, I've experimented with creating the navigation component using Vue.extend, @Component, and export default {*/ options */}.
I've also tried including a script tag within App.vue where I could register the Navigation component.
In addition, I have imported and registered the Navigation component in main.ts.
Navigation.ts:
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import { store } from '@/store';
@Component({
name: 'nav-component',
})
export default class Navigation extends Vue {}
Navigation.vue:
<template>
<nav class="nav-header" >
<div>
<button class="switch-map">MAP</button>
</div>
</nav>
</template>
<script src='./Navigation.component.ts' ></script>
<style lang="scss" scoped src='./Navigation.scss' ></style>
main.ts:
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
// various imports
import NavigationComponent from
'@/components/Navigation/Navigation.component';
Vue.config.productionTip = false;
new Vue({
components: {
'nav-component': NavigationComponent
},
data: {
},
store: store,
router,
render: h => h(App)
}).$mount("#app");
App.vue:
<template>
<div id="app">
<nav-component></nav-component>
<router-view/>
</div>
</template>
Expected outcome: A consistent navigation bar at the top of the application across all pages (currently only two routes).
Actual issue: encountering an 'unknown custom element' error. Have I registered it correctly? For recursive components, make sure to include the 'name' option.
I have encountered the 'Failed to mount component: template or render function not defined' error message with other attempted solutions. Any helpful suggestions would be greatly appreciated!