JavaScript chobi

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

はじめに

前回に引き続きブログ作成の格闘記です。

【Nuxt.js】ブログ作成の記録②

できていないこと

スクリプトタグに記入が必要なコンポーネントの実装

参考になりそうなサイト

Nuxt.jsでv-modelが動かなかったので動くようにするまで。

あとで公式のドキュメントでコンポーネント、props周り含めて確認する。

実装したいコンポーネント

App bars

Vuetifyを使ってみる

現状、Nuxt.jsでうまく実装できていないのですが、とりあえずちゃんと動かして使ってみたい！！

ってことで別でVue.jsプロジェクト作成して試してみました笑

始め方はコチラから

(Nuxt.jsと併行して起動してもポート番号が被らずに起動できるのは嬉しい)

$ vue add vuetify #Vuetifyのインストール
$ vue ui # GUI起動
$ npm install @nuxtjs/vuetify -D # Vuetifyのモジュールをインストール

と、ここで公式に書いてあるnuxt.config.jsが見当たらず。。。

調べたところこちらでaddすれば使えると書いてあったので試しに公式はスルーして使ってみた。(てかGUIも起動する意味なさげだった

とりあえず既成レイアウトをば。

動いた！！(はやくもブラックボックス化。。。苦笑)

必要最低限なレイアウトに修正して以下の感じに修正しました。

<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>

う～ん、結構スクリプト長いね。。。笑

実際使うとしたらコンポーネントにしてやったほうが見通しよさげ。(改行されているのが個人的には手間。。。)

Vue.jsで使う分にはスクリプトタグを使うコンポーネントも問題なしなことがわかりました。

ですが、同じようにNuxt.jsでスクリプトをコピペして試したところやはり動かず。

Nuxt.js(Vue.js)を使って動的モーダルコンポーネントを実装

こちらを見た感じやはりmethodsへの登録だったり、そもそもレイアウトに登録するのがアウトなんじゃないかとかいろいろわからない部分が多すぎる。。。Vue.jsの基礎からやり直そう。。。

で、できる範囲でNuxt.jsでも実装を試みた。

なんで暗いねん。。。笑

犯人はそれっぽい記述を探してたらありました。

nuxt.config.js内

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

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

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

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

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

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

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

所感・気づき・メモ

気づき

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

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

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

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

コメントを残す

RECOMMENDこちらの記事も人気です。