vue3 vuetify v-data-table vdatatable 使用するまでの設定 vdatatable vuejs

vue3 vuetify v-data-table vdatatable 使用するまでの設定

■1 vi ./src/plugins/vuetify.ts を編集

■2 以下 2行を追加
------------------------------------
/**
* plugins/vuetify.ts
*
* Framework documentation: https://vuetifyjs.com`
*/

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

// Composables
import { createVuetify } from 'vuetify'

import { VDataTable } from 'vuetify/labs/VDataTable' ★1 追加

// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
components : { VDataTable }, ★2 この1行を追加
theme: {
themes: {
light: {
colors: {
primary: '#1867C0',
secondary: '#5CBBF6',
},
},
},
},
})
------------------------------------

■3 以下のサンプルソースをそのまま使用
https://vuetifyjs.com/en/components/data-tables/basics/

おしまい