Vue Native Router gives error not being used - html

Question

So I am creating an app for a school project and I am trying to make a navigation screen.
I have a screen with 2 buttons and I am trying to make them work. If I click/press on the button I want to go to a diffrent screen.
I am new to this, this is the first time I am using Vue Native.
Current code:
<template>
<div id="app">
<HelloWorld msg="CarnavalXL"/>
<div id="nav">
<button #press="goToParadeScreen" class="nav-button">Optochten</button>
<button href="screens/Parades.vue" class="nav-button" title="Niews">Nieuws</button>
<router-link to="Parades" class="nav-button">Parades</router-link>
</div>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'CarnavalXL',
components: {
HelloWorld,
AppNavigator
},
props: {
navigation: {
type: Object
}
},
methods: {
goToPAradeScreen() {
this.navigation.navigate("Parades");
}
}
}
import {
createAppContainer,
createStackNavigator,
} from "vue-native-router";
import Parades from "./Parades.vue";
this.navigation.navigate("Parades", {/* options go here */});
const StackNavigator = createStackNavigator(
{
Parades: Parades,
},
{
initialRouteName: 'Parades',
}
);
const AppNavigator = createAppContainer(StackNavigator);
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
margin-left: 25vw;
margin-right: 25vw;
}
.nav-button {
background-color: rgba(0, 0, 0, 0.3);
padding: 100px 0px;
width: 20vw;
display: inline-block;
margin: 5px;
color: #fff;
font-size: 40px;
font-weight: 800;
}
</style>
I get the following error:
Failed to compile.
./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js):
D:\carnavalxl\src\App.vue
19:5 error The "AppNavigator" component has been registered but not used vue/no-unused-components
✖ 1 problem (1 error, 0 warnings)
I followed the guide on the site of Vue Native
I do not know what is going wrong here

Answer 1

It's because your only importing the HelloWord component and not importing AppNavigator component. If you have a component called AppNavigator you have to import it like the HelleWorld like this:
import HelloWorld from './components/HelloWorld.vue'