Bootstrapとかのナビゲーションでよくある、現在のページのリンクのクラスにactiveをつけたい場面。
Nuxt.jshではデフォルトでnuxt-link-activeとなっているので、こいつをactiveにして見たい場合など、CSS Frameworkであるある。
公式ではlinkActiveClassを使いましょうと描いてありますが、慣れていないこともあり直感的にわからなかったので。
Nuxt.jsのルートにある、nuxt.config.jsのファイルにrouter.linkActiveClassの設定を下記のスクリーンショットの様に付け加えます。
今日の反省点は、オブジェクトの階層を間違えて、router.linkActiveClassをhead以下に付け加えていて、どうやっても変更が反映されずに悩んでいた。あと、Nuxt.jsのことがよくわかっていないので、nuxt.config.jsに付け加えるべきところを、layoutのスクリプト部分にexport defaultで設定を押し込んでいたこと。これで30分ほど無駄にしました