この記事の内容
Nuxt3でフォーム処理を作成した際に、
Vuetifyのv-date-pickerの使い方につまずいたので備忘録として残しておく。
v-date-picker
公式にのっているようなコンポーネントです。
予約システムなどの入力に使えそうですね。
Vuetify2においてv-date-pickerは通常コンポーネントとして使用できますが、
Vuetify3リリース当初v-date-pickerは削除されました。
しかし、2023年6月14日リリースv3.3.4 からv-date-pickerが復活するとのことです。
つみポイント
さっそく使ってみようと思いコーディング ・・・表示されない？
sample.vue
<template>
<div>
<v-date-picker></v-date-picker>
</div>
</template>
<script lang="ts" setup>
</script>
v-date-picker使い方
なんで使えないんだとissuesを調べた結果1つのissueにたどり着いた。
Vuetifyの最新v3.3.12(2023年8月13日に確認)では常設のコンポーネントとして存在しないらしい。
代わりに現在ではVuetify Labs で利用できるようになったとのこと。
Vuetify Labsの機能は<script>でimportすると使えるようになるらしい。
sample.vue
<template>
<div>
<v-date-picker></v-date-picker>
</div>
</template>
<script lavng="ts" setup>
import { VDatePicker } from 'vuetify/labs/VDatePicker'
</script>
追記 (2024/02/25)
3.4で標準使用できるようになったみたいです！
いずれにせよVuetify Labsがあることは忘れずにしていきたい。
https://vuetifyjs.com/en/components/date-pickers/
まとめ
常設していない機能はLabsから使えるかもしれないのでRelease notesと共に要チェック！