After setting up a Vite project, creating a navigation component, and implementing a router, I decided to integrate Vuetify into the project using npm i vuetify. However, I encountered the following error:
Uncaught Error: [Vuetify] Could not find injected layout at useLayoutItem (chunk-E7QQUSJ2.js?v=0b7a6fc0:121:11) at Object.setup [as _setup] (vuetify_components.js?v=0b7a6fc0:1505:9) at setup (chunk-ULC6QWEU.js?v=0b7a6fc0:1145:24) at callWithErrorHandling (chunk-PD2AWGJV.js?v=0b7a6fc0:1652:19) at setupStatefulComponent (chunk-PD2AWGJV.js?v=0b7a6fc0:9063:25) at setupComponent (chunk-PD2AWGJV.js?v=0b7a6fc0:9024:36) at mountComponent (chunk-PD2AWGJV.js?v=0b7a6fc0:7354:7) at processComponent (chunk-PD2AWGJV.js?v=0b7a6fc0:7320:9) at patch (chunk-PD2AWGJV.js?v=0b7a6fc0:6786:11) at ReactiveEffect.componentUpdateFn [as fn] (chunk-PD2AWGJV.js?v=0b7a6fc0:7464:11)
It seems that simply adding .use(vuetify) is causing a major issue in the code.
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
})
createApp(App)
.use(router)
.use(vuetify)
.mount('#app')
This snippet displays my app.vue file:
<template>
<TheNavigation></TheNavigation>
<div class="container">
<router-view></router-view>
</div>
</template>
<script setup>
import TheNavigation from './components/TheNavigation.vue';
</script>
<style scoped>
</style>
The next section showcases my Navigation.vue content:
<template>
<v-app-bar color="primary">
<v-toolbar-title>My App</v-toolbar-title>
<v-toolbar-items class="hidden-sm-and-down">
<router-link to="/" class="nav-link" :class="{ 'active-menu': $route.path === '/' }">Dashboard</router-link>
<router-link to="/currencies" class="nav-link" :class="{ 'active-menu': $route.path === '/currencies' }">Currencies</router-link>
<router-link to="/settings" class="nav-link" :class="{ 'active-menu': $route.path === '/settings' }">Settings</router-link>
</v-toolbar-items>
<v-btn icon class="hidden-md-and-up" @click="drawer = !drawer">
<v-icon>mdi-menu</v-icon>
</v-btn>
</v-app-bar>
</template>
<script setup>
import { ref } from 'vue';
const drawer = ref(false)
</script>
<style scoped>
.nav-link {
color: blue;
text-decoration: none;
padding: 10px;
}
.active-menu {
color: lightblue;
}
</style>