Nuxt.jsめちゃくちゃ便利なのですが、使うならNuxtやVueに特化して作られたもののほうが、トラブルも少なくて積極的にそっち系のライブラリを選んで利用しています。
この記事で私がよく使っているライブラリを紹介します。
UIライブラリ
buefy
buefyはbulmaをNuxt用に作られたUIフレームワークです。
WebアプリやWebサービスで使いやすいUIがたくさん揃っています。
vuetify
vuetifyはGoogleが設計しているMaterial Designベースで作られているUIフレームワークです。
使うとめちゃくちゃGoogleっぽくなります。
UIComponentの数がとても豊富にあります。
個人的には管理画面などシステマチックな案件のときによく使います。
scroll系ライブラリ
vue-scrollto
nuxt-linkなどをクリックしてページ内scrollをいい感じにアニメーションで動作させてくれるライブラリ。
特徴としては、下記になります。
- 設定が簡単
- オプションが便利
- SSR対応済み
nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。
vue2-scrollspy
vue2-scrollspyはh1
h2
などのHeddingに合わせてナビゲーションにclassをつけるものです。
LPなど縦長のページやブログサイトで利用します。
画面固定系ライブラリ
vue-sticky-directive
vue-sticky-directiveはスクロールして特定のどこかで指定したブロックを画面固定するやつです。
固定時の判定がされたときに専用のclass
が着いたりするのでCSSでもいい感じにしやすいです。
選定のときにvue-stickyも合ったのですが、なぜか私が使ったときは動かなかったので、vue-sticky-directiveを使うようにしています。