Vuetify3でエラー head.addHeadObjs is not a function（Nuxt3＋Vue3）

Question

実現したいこと

Nuxt3＋Vue3でVuetifyを使用したい。

Nuxt3＋Vue3の導入を検討中です。（Typescriptは初めてです。）
試しに１からNuxt3でプロジェクトを進めて、サンプルのウェルカムページが立ち上がるところまで完了。
次にVuetify3の設定を追加したところで、以下エラーが出ました。

[nuxt] [request error] [unhandled] [500]head.addHeadObjs is not a function
at Object.install (C:\xxx\node_modules\vuetify\lib\framework.mjs:51:11)
at Object.use (C:\xxx\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:4377:28)
at Object.setup (C:\xxx\plugins\vuetify.js:17:18)
at wrapper (C:\xxx\node_modules\nuxt\dist\app\nuxt.js:198:21)
at fn (C:\xxx\node_modules\nuxt\dist\app\nuxt.js:214:27)
at Object.callAsync (/C:/xxx/node_modules/unctx/dist/index.mjs:49:19)
at callWithNuxt (C:\xxx\node_modules\nuxt\dist\app\nuxt.js:216:23)
at applyPlugin (C:\xxx\node_modules\nuxt\dist\app\nuxt.js:129:29)
at Module.applyPlugins (C:\xxx\node_modules\nuxt\dist\app\nuxt.js:139:11)

「head.addHeadObjs」で検索してもヒットせず、基本的なことでミスしてそうですが、知識も浅く、原因が思いつかないです。。
どなたか解決法をご存じないでしょうか。。

前提

node : v16.13.2

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev --port=3008",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "^3.4.1",
    "sass": "^1.62.0",
    "vite-plugin-vuetify": "^1.0.2"
  },
  "dependencies": {
    "mdi": "^2.2.43",
    "vuetify": "^3.1.4"
  }
}

試したこと

大体どのサイトも同じような記述だったのでそれを参考にしてます。

export default defineNuxtConfig({
  vite: {
    define: {
      'process.env.DEBUG': false,
    }
  },
  css: ['vuetify/lib/styles/main.sass', 'mdi/css/materialdesignicons.min.css'],
  build: {
    transpile: ['vuetify'],
  },
  app: {
    head: {
      title: 'test',
      meta: [{ name: 'description', content: 'test' }],
    },
  },

})

※以下の中身をコメントアウトするとエラーは無くなります

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from "vuetify/directives";

export default defineNuxtPlugin( nuxtApp => {
  const vuetify = createVuetify({
    components,
    directives
  })

  nuxtApp.vueApp.use( vuetify )
});

「head.addHeadObjs」自体は以下ファイルでのみ見つかりました。
\node_modules\vuetify\lib\composables\theme.mjs

  function install(app) {
    const head = app._context.provides.usehead;
    if (head) {
      head.addHeadObjs(computed(() => {
        const style = {
          children: styles.value,
          type: 'text/css',
          id: 'vuetify-theme-stylesheet'
        };
     ...

参考サイト：
https://zenn.dev/coedo/articles/nuxt3-vuetify3
https://note.com/doui_lab/n/n37a67a01981a

Answer 1

こんにちは、英語を日本語に訳してすみません。
Vuetify モジュールが壊れている可能性があります。
すべてのモジュールを再インストールしてください。

yarn cache clean
rm -rf node_modules
rm -rf yarn.lock
yarn install

Comments

[nana_ton]

上手くいきました！！こういうこともあるのですね、大変勉強になりました。。
本当にありがとうございます！

メモ：npm用
---------------------------
npm cache clean --force
rm -r node_modules
rm package-lock.json
npm install

Answer 2

It was a very good post indeed. I thoroughly enjoyed reading it in my lunch time. Will surely come and visit this blog more often. Thanks for sharing. ร้านอาหารอุบล

Answer 3

I've been using how-to-sign-a-pdf-with-a-digital-certificate-and-how-signnow-compares-to-hellosign-and-docusign for a year. And I can't think of anything I dislike about them. But I truly enjoyed it!

Answer 4

自分も同じ状況です...

Comments

[nana_ton]

私はZynChroMaTiKさんが仰ってくださった、再インストールで使えるようになりました！