目次
はじめに
以下の続きです。やっと記事をわけることを覚えました。笑
また、今回公式ドキュメントにしっかり目を通すことの重要性に気付きました。(今更)
Nuxt.jsの公式ドキュメント
Contentfulの公式ドキュメント
Contentfulをしっかり活用したい場合は以下に目を通すことをお勧めします。
参考になるサイト
以下とても参考になるサイトを追加で見つけました(以前見つけてたけど忘れていた。。。)のでこちらも紹介までに。
※Vuex活用されている。4章まで読了。
ビューの作成(復習編)
以前学習した内容を基に作成していきます。※今回は枠組みだけ作っていきます。
layoutsディレクトリ
ページ共通の要素をここに追加する。
pagesディレクトリ
ルーティングに対応したコンポーネントを管理するディレクトリ。
componentsディレクトリ
Vue CLIと使い方は同じ。Vueコンポーネントを管理するディレクトリ。
※components/Logo.vue、components/VuetifyLogo.vue、pages/inspire.vueは使わないので削除しました。
layoutsディレクトリ
明示的な設定(pages側でexportする)をしなければ、default.vueがレイアウトとして読み込まれる。
共通部分(HeaderやFooter)=ページ遷移しても表示したい(固定したい)部分をここに書く!!
default.vue
最初はVuetifyのインストールに伴い、toolbarなどが記載されているがこれは削除。
<next />タグに各ページのコンテンツが入る。
<nuxt-link />でリンクを追加できる。ルーティングの設定はpagesディレクトリで自動で行われる。
pagesディレクトリ
ここに存在するVueファイルがファイル名のままルーティングとなる。_(ファイル名).vueにすると動的ルーティングになる。
pages/index.vueがホームディレクトリ。
index.vue
トップページのコンテンツ。ここにContentfulから記事を取得するためのコードを記載。
Componentsディレクトリ
Componentsのインポートには、スクリプトでインポート、componentsに追加、テンプレートにタグを追加の3ステップが必要。
データを受け取り、それを含めてコンポーネント側で表示させたい場合はpropsを設定する。
データバインディング(v-bind)を使えば属性だけでなくデータも受け取れる。
デザイン
コンポーネントUI
Vuetifyにチャレンジして、実装が意外に難しいことに気付きました。
公式ドキュメントも個人的にはVuesaxの方が見やすい。。。
ってことでVuesaxに切り替えて使っていたのですが、残念ながらPopupなどScript内に処理を書かないといけないコンポーネントの実装ができませんでした。。。泣
完全な実力不足だと思うのですが、一旦両方使ってみたりいろいろ試してみようと思います。
ちなみにVuesaxはコチラを参考にインストールしました◎ Nuxt.jsでVuesaxを使う方法
追記:VuetifyでもScriptタグに入力するものは動かせませんでした。Vue.jsとNuxt.jsの違いとかそこ辺りの理解が足りないっぽいです。。。泣
一旦アニメーションを控えめにしてシンプルに作っていきたいと思います。
デザイン(おしゃれサイト探し)
その後、参考にするデザインを以下を中心に探しました。おしゃれなサイトが沢山ありますね。
おしゃれなブログデザイン23選〜参考になる国内外の美しいブログ
https://www.manicyouth.jp/cat/blog/
ん~シンプルでいいんだよな!
Vuetifyで作ったシンプルなサイトの記事も見つけた。こんな感じ。
おわりに
Vue.jsの基本機能を思いっきり無視(身についていない状態)してどんどん作っているので、基礎をわかっていたらすぐ解決できるような問題も起きている感。
コンポーネントUIを実装できなかったり。。。
バランスが難しいですが、もう少しこの状態で制作を進めてみたいと思います。
メモ
・VuetifyでFont Awesomeを使えるみたいですが、今回は個別でインストールしたので切り分けて使いました。色を追加できるのには感動しました。 参照
・webhookは実装したいな~
・.envがGitの管理下から外れるよう初期設定されているのも初知り。
・slugはcontentfulの以下と連動してる、

・contentfulのマークダウンは# h1といった感じでスペース空けないといけない。
参考サイト
npm install時に「–save」オプションはいらない
前回書いてたけどnpm i のとき–saveいらないらしい。
Contentfulの料金と使い方を整理しつつ、Nuxt.jsと組み合わせてブログを作る
引用
asyncData
は ページ コンポーネントがローディングされる前に常に呼び出されます。サーバーサイドでは 1回だけ(Nuxt アプリへの最初のリクエスト)呼び出され、クライアントサイドではページ遷移をするたびに呼び出されます。
asyncData
メソッド内のthis
を通してコンポーネントのインスタンスにアクセスすることは できません。それはコンポーネントが インスタンス化される前に このメソッドが呼び出されるからです。 asyncDataメソッドに関して(公式)
配列に基づいて、アイテムのリストを描画するために、
v-for
ディレクティブを使用することができます。v-for
ディレクティブはitem in items
の形式で特別な構文を要求し、items
はソースデータの配列で、item
は配列要素がその上で反復されているエイリアスです: リストレンダリングに関して(公式)
コメントを残す