2022-05-22

【Vuetify3】v-overlay

Vue.js

タイトルの備忘録。

現状vuetify2の公式ドキュメントしか参照できないが、これ通りにvuetify3で試しても動作しなかった。

vuetifyjs.com

調べたところ以下の回答通りに試すと動作した。
まだβ版なので仕様が確定していないと思われる。

stackoverflow.com

以下サンプル。

github.com

（追記）
後で見るとvuetify3のサイトも見えるようになっていてちゃんと書いてあった。

next.vuetifyjs.com

<template>
  <div class="text-center">
    <v-btn
      color="error"
      @click="overlay = !overlay"
    >
      Show Overlay
    </v-btn>

    <v-overlay v-model="overlay"></v-overlay>
  </div>
</template>

2022-05-07

【Vite+Vue3+TypeScript+Vuetify】プロジェクトの作成

Vue.js

以下のガイドを参考にプロジェクトを作成する。

ja.vitejs.dev

next.vuetifyjs.com

前提

Vuetify 3を正しくインストールするには、 vue- cli5.0が必要。

vue --version         
@vue/cli 5.0.4

プロジェクトの作成

Viteのプロジェクトを作成する。

npm create vite@latest

順に選択していく。

これで完了。

Vuetifyの追加

作成したプロジェクトへ移動する。

cd portfolio

vuetifyを追加する。

vue add vuetify

Vite Preview (Vuetify 3 + Vite)を選択する。

これで完了。

npm install

npm run dev

localhostへアクセスする。

2022-05-06

【Vue.js】Vuetify

Vue.js

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

vuetifyjs.com

Vuetify2 vuetifyjs.com

Vuetify3 next.vuetifyjs.com

2022-05-04

【Vue.js+TypeScript】Vue Routerによるページ遷移

Vue.js

以下の記事を参考にさせていただきページ遷移ができるようになった。

note.com

Vue Routerをインストールする。

npm install vue-router@4

router.ts

import {createRouter, createWebHistory} from 'vue-router';
import TopView from "./pages/TopView.vue"
import InfoView from "./pages/InfoView.vue"
import AppsView from "./pages/AppsView.vue"

const routes = [
    {path: '/', name: 'top', component: TopView},
    {path: '/info', name: 'info', component: InfoView},
    {path: '/apps', name: 'apps', component: AppsView},
]

const router = createRouter({
    history: createWebHistory(), // HTML5 History モード
    routes,
})

export default router;

main.ts

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

App.vue

<script setup lang="ts">
</script>

<template>
  <router-link to="/">Top</router-link> |
  <router-link to="/info">Info</router-link> |
  <router-link to="/apps">Apps</router-link>
  <router-view/>
</template>

TopView.vue

<script setup lang="ts">
</script>

<template>
  <h1>Top</h1>
  <img alt="Vue logo" src="../assets/logo.png"/>
</template>

<style scoped>
</style>

2022-05-04

【Vue.js+TypeScript】Vueコンポーネント

Vue.js

足し算、引き算をする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>
  <button type="button" @click="increment">IncrementButton</button>
  <button type="button" @click="decrement">DecrementButton</button>
</template>

<style scoped>

</style>