Cntlog > スキルアップ・ノウハウ > JavaScript・jQuery > VueやNuxt.jsでよく利用しているライブラリ

VueやNuxt.jsでよく利用しているライブラリ

Nuxt.jsめちゃくちゃ便利なのですが、使うならNuxtやVueに特化して作られたもののほうが、トラブルも少なくて積極的にそっち系のライブラリを選んで利用しています。

この記事で私がよく使っているライブラリを紹介します。

UIライブラリ

buefy

buefybulmaをNuxt用に作られたUIフレームワークです。

WebアプリやWebサービスで使いやすいUIがたくさん揃っています。

buefy

vuetify

vuetifyはGoogleが設計しているMaterial Designベースで作られているUIフレームワークです。

使うとめちゃくちゃGoogleっぽくなります。
UIComponentの数がとても豊富にあります。

個人的には管理画面などシステマチックな案件のときによく使います。

vuetify

scroll系ライブラリ

vue-scrollto

nuxt-linkなどをクリックしてページ内scrollをいい感じにアニメーションで動作させてくれるライブラリ。

特徴としては、下記になります。

  • 設定が簡単
  • オプションが便利
  • SSR対応済み

nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。

デモ

vue-scrollto

vue2-scrollspy

vue2-scrollspyh1h2などのHeddingに合わせてナビゲーションにclassをつけるものです。

LPなど縦長のページやブログサイトで利用します。

デモ

vue2-scrollspy

画面固定系ライブラリ

vue-sticky-directive

vue-sticky-directiveはスクロールして特定のどこかで指定したブロックを画面固定するやつです。

固定時の判定がされたときに専用のclassが着いたりするのでCSSでもいい感じにしやすいです。

選定のときにvue-stickyも合ったのですが、なぜか私が使ったときは動かなかったので、vue-sticky-directiveを使うようにしています。

デモ

vue-sticky-directive

関連記事

npmで書くときの簡単な書き方 package.jsonを作る この書き方だと何も聞かれずにいい感じのpackage.jsonが作られる。 npm init -y packageのインストール方法 npm install ––save-devの省略系です。 書き方が短くなって便利。 npm i ...
初めてjQueryプラグインを作ってみた(RSS取得)... 最近社内でJSを書く機会が増えてきたので、他の人にも扱いやすいようにと思ってjQueryプラグインにする事を思いつきました。 作ったプラグインの内容はRSSを取得・表示させるためのjqueryプラグインです。 「WordPressならそんなのデフォルトで入ってるやん…」って思ったくら...
Vue.jsとmoment.jsでカウントダウンタイマーを作る(サンプルコード有り)... カウントダウン系のライブラリは結構ありますが、Vue.jsとmoment.jsを使うだけで簡単にカウントダウンの数字を生成できるのでご紹介します。 vue.jsとmoment.jsを使う理由 vue.jsは簡単にデータの受け渡しができるので、リアルタイムにデータの反映ができるようになりま...
jQuery不要のスクロール時の起動で使えそうなJSライブラリ... 最近Vue.jsを使う機会が増えたのもあってjQuery依存しないライブラリを探していました。 いろいろ調べてみると、delighters.jsが良さそうでした。 実際に使ってみた感想・使い方は後日かければなーと思います。 他にも気になってたライブラリ CSSで記載す...
Vue.jsの入門レベルを学ぶためにやったこと... ここ3ヶ月くらい気になっていたVue.jsを使うようになりました。 私はJSがそれほど得意ではないのですが、Veu.jsは日本語の情報も多くて、調べると結構情報が出てきます。 とはいえ、初めて使うあるあるだと思うのですが、何から手を付けていいかわからない問題に出くわすと思います。 手探...
簡単にスクロールアニメーションが設定できるAOS(jQuery不要)... 最近のWebサイトを見ているとメインビジュアルのアニメーション以外にもスクロール時にコンテンツの一部がアニメーションしてるページが増えてきました。 一つ一つJSで操作を管理すると結構手間になりますがライブラリを使えば、簡単に出来るものもあります。 今回はJSをほぼ書かずに簡単にスクロール...