Vuetify3の小ネタ - 1

レイアウト構成

参照

• https://next.vuetifyjs.com/en/features/application-layout/

要素

• v-app-bar

  • ヘッダーバー

• v-navigation-drawer

  • サイドバー

• v-footer

  • フッター

• v-main

  • メイン画面

• スマホアプリ開発する時に

  • v-system-bar
  • v-bottom-navigation

サンプル

---

グローバルfont family変更

参照

• https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify
  • Update 2021

対応

App.vue中に

$font-family:'Ubuntu'

.v-application {
  [class*='text-'] {
    font-family: $font-family, sans-serif !important;
  }
  font-family: $font-family, sans-serif !important;
}

font-size

参照

• https://m2.material.io/design/typography/the-type-system.html

内容

• vuetify3に、1rem == 16pxぽい
  • 20px == 1.25rem
  • 14px == 0.875rem

aliasingを使うと便利

参照

• https://next.vuetifyjs.com/en/features/aliasing/

対応

src/plugins/vuetify.vue

import { createVuetify } from 'vuetify'
import { VBtn } from 'vuetify/components'

export default createVuetify({
  aliases: {
    MyButton: VBtn,
  }, 
  defaults: {
    MyButton: { variant: 'tonal' },
  },
})

base.vue

<my-button
  @click="click" >テスト
</my-button>