9

I am using the Vuetify 3 beta with vue-cli v5, but when I try to use v-app-bar in my template, I get Error: Could not find injected Vuetify layout

Marc Fletcher
  • 932
  • 1
  • 16
  • 39
  • There's not enough context to determine the problem. Can you share a link to a reproduction of the problem? – tony19 Mar 29 '22 at 01:24

3 Answers3

14

This just happened to me. The cause was that I had the v-app-bar outside of the v-app. Moving it inside fixed it.

steven2308
  • 2,250
  • 1
  • 19
  • 22
  • what about when testing the component `v-app-bar`? In this case, I don't want to wrap my component in `v-app` – Krishna Mar 15 '23 at 16:45
8

This error occurs when you forget to wrap your vuetify code inside the v-app tag. To fix that add the v-app tag as shown in the code below:

<v-app>

  <!-- Your appBar goes here -->
  <v-app-bar  title="My site" app>
  </v-app-bar>  

</v-app>
Gedeon Mutshipayi
  • 2,871
  • 3
  • 21
  • 42
  • 1
    what about when testing the component `v-app-bar`? In this case, I don't want to wrap my component in `v-app`. – Krishna Mar 15 '23 at 16:36
0

I had a similar issue where my component AppFooter.vue looked like this

<template lang="pug">
v-footer(app)
</template>

and my simple mounting test had Error: [Vuetify] Could not find injected layout. I resolved the issue by adding v-layout.

<template lang="pug">
v-layout
  v-footer(app)
</template>
iamface
  • 673
  • 1
  • 9
  • 27