Getting error adding vuetify to a vite project

Question

I created a vite project created a navigation component, created a router and then added vuetify to the project by running npm i vuetify. I get the following error now:

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)

I just added a single .use(vuetify) and it messes up the entire 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 is my app.vue

<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 following is my Navigation.vue

<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>

Answer 1

You would always use v-app for the root layout.

Please refer to doc for the detail:

<v-app theme="light">
  <TheNavigation></TheNavigation>
  <div class="container">
    <router-view></router-view>
  </div>
</v-app>