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