Trouble registering NavBar component in App.vue

Question

Trying to create a navigation bar that exists across my Vue application. Coming from react so I'm trying to do import my Navigation Component into main.ts and use it above the router outlet in App.vue. Application was generated using vue-cli with typescript and Router.

I've tried writing the navigation component with Vue.extend, @Component, export default {*/ options */}.

I've tried adding a script tag in App.vue inside of which I would register Navigation component.

I've import 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: navigation bar across top of application throughout all pages (i only have two routes at the moment)

Actual: unknown custom element ''. Did you register it correctly? For recursive components be sure to include the 'name' option.

A lot of alternatives have just led to the 'Failed to mount component: template or render function not defined' error message. Any suggestions out there? Thanks for any help!

Answer 1

nav-component is used in App.vue, but that file has no components declaration for it. It looks like you've declared it in main.ts, but that should be moved into App.vue, where the component is actually used.

^App.vue:

<script>
import NavigationComponent from '@/components/Navigation/Navigation.component';

export default {
  name: 'app',
  components: {
    'nav-component': NavigationComponent
  }
}
</script>

Also note that the <script> tag in Navigation.vue is missing lang="ts".

Answer 2

1. As tony19 said, nav-component in App.vue not registered.
2. The components you registered are locally in `main.ts':

// The components created by `new Vue` are local.
// *mainInstance including `nav-component`,bus App isn't including it.
const mainInstance = new Vue({
  components: {
    'nav-component': NavigationComponent
  }
  // Just a rendering component,App cannot inherit the current injected components.
  render: h => h(App)
});

If you want to create global components, you can do this:

Vue.component('nav-component', NavigationComponent);

Answer 3

It seems, you are importing Navigation.component

import NavigationComponent from 
'@/components/Navigation/Navigation.component';

But you need to import Navigation.vue in here.

import NavigationComponent from 
'@/components/Navigation/Navigation.vue';

Answer 4

import the navigation-component in App.vue in this way:

import NavigationComponent from 
'@/components/Navigation/Navigation.vue';

There is no need to import it in main.ts, If you import it in App.vue and use it in this way, the navigation-component will be available in whole your application.

<template>
  <div id="app">
    <navigation-component></navigation-component>
    <router-view/>
  </div>
</template>

remember to register it in component in the script tag in App.vue in this way:

 components: {NavigationComponent}