さぁ、先程のリニューアルのお話記事の続きです。
今回は実際構築していく中で引っかかったなぁと思うポイントを抜粋してメモしておきたいと思います！！
asyncDataを利用した際に取得できない
今回はWordPressのRest APIを使用したので、通信にasyncDataを利用しました。
これマジで時間かかったのですが、答えは至って単純。。。
componentでasyncDataは使えないのでpageコンポーネントで利用してね
ということでした。。。公式にもちゃんと載ってました。。。
単一コンポーネント使いがちなので、すぐそっちで処理しようとするのがマズかった感じですね。
pageコンポーネントでしかasyncは利用できないのでご注意を！
ちなみにpageコンポーネントで取得した内容をpropsで渡してあげるのはOKです。
v-htmlで表示した内容にCSSがかからない
今度は単一コンポーネントでのお話なのですが、
htmlタグを展開させるためにv-html=“a”のような形で表示しますが、その際にcssがかからないという現象がありました。
ちなみにコンポーネント内でscssを記述している前提です。
これの解決策として
/deep/ p{}という形でネストすればOK。もしくはassetsのsassファイルに記入する。
という感じでした。
// NGパターン(コンポーネント内)
<style lang="scss" scoped>
.sample{
p{} // これはかからない
}
</style>
// OKパターン(コンポーネント内)
<style lang="scss" scoped>
.sample{
/deep/ p{}
}
</style>今回はコンポーネント内に書くことにこだわりは無かったので、外部ファイルから読み込む方向にしました。
ちなみに外部ファイルにした場合は逆に/deep/を書くと効かないのでご注意を！！
WP REST Filterというプラグインを入れたが「posts?filter=カテゴリー名」で一覧取得できない
Rest APIで特定のカテゴリー情報を取得しようとすると結構分かりづらい(カテゴリーIDしか取得できない)ので、カテゴリー名入れたら取得とか出来ないかなぁと思い、調べた所このWP REST Filterというプラグインに行き着きました。
使い方もプラグインを入れるだけという簡単さだったので、試してみたのですがうんともすんとも言わず。。。
全く理由も分からず面倒になったので、そのままカテゴリーIDを使って構築しました。
結局こちらは理由分からず。。。
mode=“universal”でstoreにファイルを作成したら「Cannot find module ‘vuex’」エラー
Nuxtではモードを「spa」もしくは「universal」の2つから選択できます。簡単に言うとSSRするかしないかという差です。
spaモードだったら問題なくvuexを使えるのに、universalモードにするとvuexの読み込みエラーになりました。。。
相当な時間をかけて調べてみたのですが、全く理由分からず。。。
途方に暮れること数時間。。。Nuxt自体を入れ直してみようかな。と思いやってみたら直った。
何かよく分からないけどバグってただけっぽかったです。
何だったんだあの時間は。。。
その他色々あったが。。。
本当に引っかかったなぁというのは上記でした！
まぁ何か1つやる度にエラー連発、表示されない、取得できないラッシュではありましたが、思ってたよりは時間かからず構築できたのかなぁと思います。
Vueはホントにhtml、css、jQueryくらいを問題なく使える人なら、学習コスト低く、ある程度実装できるなぁという印象でした。
何より単一コンポーネントが恐ろしいくらい便利ですね。
今までコンポーネント設計とか、メッチャ考えてクラス付けとかしてたのが何だったのかというレベル。
これに慣れるとCSS書けなくなるんじゃないかレベル。
今後の座右の銘は「scoped」にしてもいーんじゃないかレベル。
とはいえクライアントにファイル引き継ぐ場合とかは普通に構築しないとダメだろうし、どっちも出来たらいいよね。という感じでしょうか。
個人的には、今後は普通の静的サイト、かつクライアントにファイルを渡さないで作るならNuxtを採用していこうかなぁと思ったりしています。
また色々試してみて躓く箇所を記事にしていけたらいーなーと思います！
ありがとうございましたっ！！