I am currently learning Vuetify and Vue.js and attempting to create a simple navbar. However, when I try to run the app using npm, I encounter an error message 'failed to resolve component' in the console and the page remains static.
This is my Navbar.vue code:
<template>
<v-app>
<v-app-bar color="blue" class="flex-grow-0" app dark>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-app-bar-title>Coding Beauty</v-app-bar-title>
</v-app-bar>
<v-navigation-drawer app v-model="drawer">
<v-list-item>
<v-list-item-content>
<v-list-item-title class="text-h6"> Learning Vuetify</v-list-item-title>
<v-list-item-subtitle> Using Navigation drawers</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list dense nav>
<v-list-item v-for="item in items" :key="item.title" link>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
items: [
{ title: 'Dashboard', icon: 'mdi-view-dashboard' },
{ title: 'Account', icon: 'mdi-account-box' },
{ title: 'Settings', icon: 'mdi-cog' },
],
}),
};
</script>
Here is my App.vue code:
<template>
<div>
<Navbar />
</div>
</template>
<script>
import Navbar from '@/components/Navbar.vue'
export default {
components: {
Navbar,
},
};
</script>
I have ensured that all packages are up to date and Vuetify is installed properly.
This is the content of my main.ts file:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Vuetify from 'vuetify';
import Vue from 'vue';
import 'vuetify/dist/vuetify.min.css';
createApp(App).use(router).mount('#app')