（以前社内ブログに投稿していた記事の再掲です）

Vuetify3 betaで500：Could not find injected Vuetify layoutエラーが表示される原因と対策についてと、タグについてまとめました。

エラー内容

公式のコンポーネントのサンプルコードを実行したところ、以下画像のようにCould not find injected Vuetify layoutエラーが発生しました。

原因は、公式ページに記載されているサンプルコードがで囲われていないからです。

以下のように書くと、上記のエラーが発生しますが、

sample.vue

<template>
  <div>
    <v-app-bar>
      <v-app-bar-title>test</v-app-bar-title>
    </v-app-bar>
  </div>
</template>

以下のように書けばエラーは発生せずにAppBarは表示されます。

sample.vue

<template>
  <v-app>
    <v-app-bar>
      <v-app-bar-title>test</v-app-bar-title>
    </v-app-bar>
  </v-app>
</template>

について

そもそもタグとは、

と同様の役目を果たすVuetifyを利用する上で必須とされるタグです。

Vuetifyのコンポーネントタグはすべてタグの内側に記載する必要があります。

で囲わなくてもエラー無く表示されるコンポーネントもありますが、予期せぬ動作を招く原因になるので以下のように囲うようにしましょう。

sample.vue

<template>
  <v-app>
    // Vuetifyコンポーネントの記述
  </v-app>
</template>