Vuetify

概要 Vuetify3のv-dialogを使って、ダイアログをどのように実装するのが良いか考える中で、ライフサイクルの異なる変数は外部のVueコンポーネントに切り出したほうがいいと気が付いた。 ライフサイクルの異なる変数とは、以下のようなものを想定している。 変数の型に、nullやundefinedのような不定であることを表現する値を含む。 コンポーネントを初期化した後にも、何らかのイベントによって値が定まった状態と定まっていない状態とを行き来する。 たとえばダイアログについて考えると、ダイアログが開いているときだけダイアログ内の内容が定まるが、ダイアログが閉じているときには内容が定まらない。…

GMO メイクショップ コアグループでエンジニアをしている池田です。 今回はVue3 + Vite + Vuetifyという構成のプロジェクトにStorybook8を導入したので、そのことを記事にまとめてみました。 対象 セットアップ 前提 Storybookのセットアップ Storyファイル作成 vue-component-metaでDocsの自動生成 まとめ 補足：Storybook8の変更点 参考 対象 Vue + Viteを使用していて、Storybookを新たに導入したい Storybookがどんな感じか動かしてみたい セットアップ 前提 対応しているバージョンは以下の通りです。 V…

こんにちは、GMOメイクショップ フロントエンドエンジニアの原田です。 Vuetify3のカスタムアイコン名の入力ミスを無くすため、型定義を改善してみました。この記事では、その定義方法をご紹介します。

こんばんは🌙piyokokkoxです🐥 今日は、vueのUIライブラリ、Vuetifyに関する話題になります！ Vuetifyの中に、v-calendarという、カレンダーを手軽に表示できるコンポーネントがあります。カレンダーを手軽に表示できる上にイベントやメソッドの種類も豊富で開発が捗ること間違いなしのコンポーネントなんですよ💻 <template> <div> <v-calendar v-model="value" type="month" ></v-calendar> </div> </template> たったこれだけで、以下のようなカレンダーがすぐ出来上がります！📅 しかしこのカレン…

こんにちは、CTOの小林です。年々歳をとるにつれて、1年がどんどん短く感じるようになってきました。12月なんて体感で3日くらいしかないような気がします。 「師走」ということで、Stable Diffusionで生成した「走る師匠」の画像 kickflowではこの1年は通常の機能開発と並行して、Nuxt 2から3へのバージョンアップを行っていました。本格的な移行作業は今年の10月ぐらい始めたのですが、移行のための調査や事前準備はNuxt 3がリリースされた2022年の11月から開始しているので、1年以上かかった長期プロジェクトとなります。今日はNuxt 3へのバージョンアップにkickflowが…

npm install -g @vue/cli でグローバルにvue/cliを入れる vue create (作るプロジェクトの名前) で、vueをインストール開始。 インストール方法を聞かれるので Manually select features を選択 Check the features needed for your project では以下を選択。TypeScriptはできるんだったらw 2.xを（とりあえず）選ぶ（プロジェクトによる。無論3xを使う場面もあろう） Use history mode for router? (Requires proper server setup f…

概要 Nuxt3 と Vuetify を使って SPA を実装しています。 ログイン成功したときなどに、 遷移先に Snackbar でメッセージを表示させたいと考えました。 ところが、以下のように pages 配下のコンポーネントに Snackbar を書くと、遷移先のページには Snackbar を表示することができませんでした。 <script lang="ts" setup> const message = ref<string | null>(null); </script> <template> <v-main> <v-btn @click="message='ログインに成功しまし…