【Vuetify3】Failed to resolve component: v-data-tableの対処法

今回は、私と同じくネット上の優れた記事を流し読みして躓き、時間を無駄にする人向けの記事です。

VDataTableのv2→v3の移行
1. VDataTableは別途importが必要

VDataTableのv2→v3の移行

私は今、個人開発でNuxt2からNuxt3にプロジェクトを移行させる作業を行っています。

で、VDataTableを使用しようと思ったら以下のようなエラーが出ました。

chunk-K4GEDSIH.js:1654 [Vue warn]: Failed to resolve component: v-data-table
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

「v-data-tableが解決できない…！？また面倒なやつが来たか…。」

と思いましたが、そんなことはありません。

ネット上にあるVuetify3のv-data-tableの記事を漁っていればすぐ解決できます。（てか公式に書いてあります。）

Introduction to Labs — Vuetify

A collection of in-development components for testing purposes before final release

Vuetify3のv-data-tableを試してみる

VDataTableは別途importが必要

VDataTableはVuetify3を普通にimportするだけでは足りず、VDataTable用のimport宣言が必要です。

下記のvuetify.tsを見てもらえれば分かりますが、VDataTableはvuetify/componentsには存在しないみたいなんですよね。

plugins/vuetify.ts

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { VDataTable } from 'vuetify/labs/VDataTable'

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    // ↓↓↓ 削除 ↓↓↓
    // components,
    // ↑↑↑ 削除ここまで ↑↑↑
    // ↓↓↓ 追加 ↓↓↓
    components: {
      components,
      VDataTable
    },
    // ↑↑↑ 追加ここまで ↑↑↑
    components,
    directives,
    ssr: true
  })

  nuxtApp.vueApp.use(vuetify)
})

VDataTableはVuetify2時代から存在しますが、Vuetify3がリリースされたから比較的新しいAPIです。だから別途importが必要なんですかね…？

まぁ、いいや

とりあえず解決。

vuetify/labs/VDataTableでimportするより、vuetify/labs/componentsで丸ごとimportしちゃった方が後々良さそうです。

こじらでした

じゃ