Nuxt.jsでVuetifyのクラスやカラーパックが効かない

どんな状態か

<v-row>や<v-btn>のようなコンポーネントは使えるが、mx-autoやtext-center、redといったVuetify独自のクラスが一切効かない…

原因と解決策

<nuxt>コンポーネントを<v-app>で囲っていなかったのが原因。
上記の問題が起きている時はv-appの部分をdivタグにしていた

default.vue

<template>
  <v-app>
    <nuxt />
  </v-app>
</template>

上記のようにすることでちゃんと動くようになった。

公式サイトにも

The v-app component is REQUIRED for all applications.

と書いてあった。

Nuxtプロジェクト作成時に自動生成されるdefault.vueが長かったので、中身を確認せずにv-appも含めたtemplate内部を全て書き換えてしまったのが敗因😫

公式サイト

• Application service — Vuetify