【Nuxt.js】ブログ作成の記録③　～Vuetifyを使ってみた～

<template>
  <v-app id="inspire">
    <v-navigation-drawer v-model="drawer" app>
      <v-list dense>
        <v-list-item link>
          <v-list-item-action>
            <v-icon>mdi-home</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Home</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-app-bar app color="blue" dark>
    <!-- 以下@clickがdata drawerと連動してる -->
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <v-toolbar-title>Header botton</v-toolbar-title>
    </v-app-bar>
    <v-content>
      <v-container class="fill-height" fluid>
        <v-row align="center" justify="center">
          <v-col class="text-center">
          </v-col>
        </v-row>
      </v-container>
    </v-content>
    <v-footer color="blue" app >
      <span class="white--text">&copy; Footer copy</span>
    </v-footer>
  </v-app>
</template>
<script>
  export default {
  name: 'App',
  components: {
  },
  props: {
    // source: String, //なくても動いた
  },
  data: () => ({
    drawer: false, //falseで閉じ、true(null)で空き
  }),
  }
</script>

vuetify: {
  customVariables: ['~/assets/variables.scss'],
  theme: {
    dark: false, # ここをtrueからfalseに変えたら直りました。
    themes: {
      dark: {

これいつdarkにテーマ設定されたんだろう。。。とりあえずいろいろカスタムできるみたいです。

続いてカードコンポーネントをVue.js側で試してみました。

問題なし！しゃれおつ！！がしかし！！nuxtではこちらも上手く表示できなかった。泣

その後、nuxtでも使えるようにちょくちょくアレンジしながら作成してこんな感じに。

少しずつ理解できてきた。

でもコンポーネントをコピペして使えないのは不便だな～

所感・気づき・メモ

気づき

・今更だけどVueファイルのテンプレートタグ内にコメントアウトでメモってもブラウザ上では表示されないのがありがたい。

・Font Awesomeもブラックボックス化してる。。。泣

メモ(参考にしたサイトなど)

・画像に文字を重ねる方法