Zenn
Open7

Vue3 / Vuetify3 周りの試行錯誤

TypeScript
Vue 3
Vuetify 3
yukiko_bassyukiko_bass

アイコンが表示されない問題

https://qiita.com/gaasuu_itnav/items/07303e8532d970293634

@mdi/js でインストールしないといけなかったっぽい

$ npm i -D @mdi/js
main.ts
// Vuetify
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
+ import { aliases, mdi } from "vuetify/iconsets/mdi-svg";
import "vuetify/styles";

const vuetify = createVuetify({
  components,
  directives,
+  icons: {
+    defaultSet: "mdi",
+    aliases,
+    sets: {
+      mdi
+    }
+  }
});
Header.vue
<script setup lang="ts">
import { mdiAccount } from "@mdi/js";
</script>

<template>
	<v-app-bar color="grey-lighten-4" :elevation="1">
		<v-app-bar-title>
			管理画面
		</v-app-bar-title>
		<template v-slot:append><v-icon :icon="mdiAccount"></v-icon>accountName</template>
	</v-app-bar>
</template>

yukiko_bassyukiko_bass

VDataTable 使いたい

https://vuetifyjs.com/en/labs/introduction/
https://zenn.dev/takayoshi/articles/bdf3a0218537be
https://vuetifyjs.com/en/components/data-tables/virtual-tables/

公式のソースそのままだけど、headers のエラーが解消できない

yukiko_bassyukiko_bass

一応これで表示できた

main.ts
import { VDataTable, VDataTableVirtual } from "vuetify/labs/VDataTable";

const vuetify = createVuetify({
  components: {
    VDataTable,
    VDataTableVirtual
  },
  icons: {
    defaultSet: "mdi",
    aliases,
    sets: {
      mdi
    }
  }
});
InformationView.vue
<script setup lang="ts">
import DataTableViewVue from "@/views/DataTableView.vue";
import { mdiAlertCircleCheckOutline } from "@mdi/js";
</script>

<template>
	<h1>Dashboard</h1>
	<v-card class="mx-auto" :prepend-icon="mdiAlertCircleCheckOutline">
		<template v-slot:title>
			information
		</template>
		<v-card-text>
			<DataTableViewVue />
		</v-card-text>
	</v-card>
</template>
DataTableView.vue
<script setup lang="ts">
import { computed } from 'vue';
import type { VDataTable } from 'vuetify/labs/components';

// headers を黙らせるために、readonly Headerを定義
type UnwrapReadonlyArrayType<A> = A extends Readonly<Array<infer I>> ? UnwrapReadonlyArrayType<I> : A
type DT = InstanceType<typeof VDataTable>;
type ReadonlyDataTableHeader = UnwrapReadonlyArrayType<DT['headers']>;

const headers: ReadonlyDataTableHeader[] = [
	{
		title: 'Dessert (100g serving)',
		align: 'start',
		sortable: false,
		key: 'name',
	},
	{ title: 'Calories', align: 'end', key: 'calories' },
	{ title: 'Fat (g)', align: 'end', key: 'fat' },
	{ title: 'Carbs (g)', align: 'end', key: 'carbs' },
	{ title: 'Protein (g)', align: 'end', key: 'protein' },
	{ title: 'Iron (%)', align: 'end', key: 'iron' },
]

const desserts = [
	{
		name: 'Frozen Yogurt',
		calories: 159,
		fat: 6,
		carbs: 24,
		protein: 4,
		iron: '1',
	},
	{
		name: 'Ice cream sandwich',
		calories: 237,
		fat: 9,
		carbs: 37,
		protein: 4.3,
		iron: '1',
	},
	{
		name: 'Eclair',
		calories: 262,
		fat: 16,
		carbs: 23,
		protein: 6,
		iron: '7',
	},
	{
		name: 'Cupcake',
		calories: 305,
		fat: 3.7,
		carbs: 67,
		protein: 4.3,
		iron: '8',
	},
	{
		name: 'Gingerbread',
		calories: 356,
		fat: 16,
		carbs: 49,
		protein: 3.9,
		iron: '16',
	},
	{
		name: 'Jelly bean',
		calories: 375,
		fat: 0,
		carbs: 94,
		protein: 0,
		iron: '0',
	},
	{
		name: 'Lollipop',
		calories: 392,
		fat: 0.2,
		carbs: 98,
		protein: 0,
		iron: '2',
	},
	{
		name: 'Honeycomb',
		calories: 408,
		fat: 3.2,
		carbs: 87,
		protein: 6.5,
		iron: '45',
	},
	{
		name: 'Donut',
		calories: 452,
		fat: 25,
		carbs: 51,
		protein: 4.9,
		iron: '22',
	},
	{
		name: 'KitKat',
		calories: 518,
		fat: 26,
		carbs: 65,
		protein: 7,
		iron: '6',
	},
]
const virtualDesserts = computed(() => {
	return [...Array(100).keys()].map(i => {
		const dessert = { ...desserts[i % 10] }
		dessert.name = `${dessert.name} #${i}`
		return dessert
	})
})

</script>
<template>
	<v-container class="fill-height">
		<v-data-table-virtual :headers="headers" :items="virtualDesserts" class="elevation-1" item-value="name" showSelect>
		</v-data-table-virtual>
	</v-container>
</template>