タイトルの備忘録。 現状vuetify2の公式ドキュメントしか参照できないが、これ通りにvuetify3で試しても動作しなかった。 vuetifyjs.com 調べたところ以下の回答通りに試すと動作した。 まだβ版なので仕様が確定していないと思われる。 stackoverflow.com 以…

以下のガイドを参考にプロジェクトを作成する。 ja.vitejs.dev next.vuetifyjs.com 前提 Vuetify 3を正しくインストールするには、 vue- cli5.0が必要。 vue --version @vue/cli 5.0.4 プロジェクトの作成 Viteのプロジェクトを作成する。 npm create vite@l…

Vue.jsで使用できるマテリアルデザインのUIフレームワーク vuetifyjs.com Vuetify2 vuetifyjs.com Vuetify3 next.vuetifyjs.com

以下の記事を参考にさせていただきページ遷移ができるようになった。 note.com Vue Routerをインストールする。 npm install vue-router@4 router.ts import {createRouter, createWebHistory} from 'vue-router'; import TopView from "./pages/TopView.vue…

足し算、引き算をするVueコンポーネントのサンプル。 MuButton.vue <script setup lang="ts"> import {ref} from 'vue' const count = ref(0) const increment = () => { count.value++ } const decrement = () => { if (count.value == 0) { return } count.value-- } </script> <template> <h1>{{ count }}</h1> </template>

プロジェクトの作成からDeployまでの備忘録。 ※以下はIntelliJ IDEAのターミナルで実行している。 プロジェクトの作成 FirebaseへのDeploy GitHub Actionsで自動的にDeploy プロジェクトの作成 1.ターミナルで以下を実行する。 npm init vite@latest 2.プロ…

Vue.jsの学習記録。 Vite Vue CLI 単一ファイルコンポーネント Vite Vite（ヴィート）は Vue SFCサポートをする高速なビルドツール。 Vita + Vue を使い始めるには、以下を実行する。 npm init vite@latest 開発サーバの起動や Hot Module Replacement （HMR…

Vue.jsの学習記録。 CodePen mount データバインディング コンポーネント ディレクティブ ディレクティブの例 使用例 v-bindディレクティブ 省略式 v-ifディレクティブ v-forディレクティブ v-onディレクティブ v-modelディレクティブ v-onceディレクティブ …