[MavsDiary #3]NuxtJS + プラグインで作る必要最低限のプロジェクト構築

こんにちは、タロウです。

弊社マーベリックスでは、NuxtJSでWebサイトを始め、システム開発でも使用しています。

そんな弊社の強みであるNuxtJSで、必要に応じたおすすめのプラグインを紹介します！

1.RestFulなAPIにはド定番のコレ。【axios】

Nuxt.js(Vue.js)で開発するにあたりRestFulなAPIを使うことがほとんどかと思いますが、
jsでイチから書くのはとてもしんどいです。
axiosを使うことでソースもシンプルに、そして簡単にAPIを実行することができます。
また、基本は非同期通信ですがasync/awaitを使うことで返却を待つこともできるので、
様々なシーンで使い勝手の良いオススメのプラグインです！

インストールはこちら。

2.状態管理は任せた。【Vuex】

開発を進めていると、どうしてもページを跨ぐデータのやり取りが発生してしまいます。
都度パラメータでも良いですが、コード冗長になりますしなによりわかりにくいです。
公式にも書かれている通り、小規模な開発ではあまり恩恵を受けられませんが、
大規模になればなるほど必須と言っていいほど入れたほうが良いです。

また、Vuexでは役割が明確になっているため複雑化せずに管理することができます。

Mutation　→　一般的なSetter
Actions　→　コンポーネントから実行される関数
getters　→　一般的なGetter
state　→　値保持領域

インストールはこちら。

3.もうバリデーションは自分で書かない。【vee-validate】

超メジャーになっているプラグインですが、すごく簡単にバリデーションチェックを行うことができます。
また、バリデーションエラー時のメッセージが変数に格納されるので、自由に出力位置を調整することができます。
Vueでの開発では必ず入れたいプラグインです！
もちろんAPI側でのバリデーションも忘れずに。

インストールはこちら。

4.多言語化・国際化を簡単に。【nuxt-i18n】

グローバル化を行なっているWebシステム、Webサイトを多く見るようになりました。
言語ごとにファイルを分けて置くことで日本語英語はもちろんですが、
一度実装すれば言語ファイルを増やすだけで、様々な言語に対応することができます。

インストールはこちら。
詳しい使い方はこちら。

5.環境固有の設定を簡単に管理。【dotenv】

ローカル環境は[開発用DB]、商用本番環境は[本番用DB]といったように、
DBの向き先やAPI接続先が環境によって変えるケースが多いと思います。
昔はソースに接続先をベタ書きしていましたが今は滅多に見なくなりました。
このプラグインを使うとNuxt.jsにおいても簡単に環境変数を切り替えることができるので、
動作環境が分かれているプロジェクトでは取り入れたいプラグインです！

インストールはこちら。
※npmサイトのReadMeが空っぽなので、使い方はこちらが分かりやすいです。

6.無限スクロールで表示をシームレスに。【vue-infinite-loading】

Instagram、TwitterとSNSを始め、情報系サイトでも定番となってきている機能を実現してくれるプラグインです。
ある程度スクロールすると自動で関数を実行することができます。
ユーザー操作が増えてしまうのページャーを脱却したい方にぜひ！
ただ、絞り込みやワード検索などの途中で再検索させるような場合は、ロジックがやや複雑化することがあるので注意が必要です。

インストールはこちら。
詳しい使い方はこちら。

7.お知らせはシンプルに。【toast】

toast(トースト)は完了やエラーをシンプルに表示する方法の一つです。
ユーザーに視覚的に伝えることができるため、取り入れているプロジェクトが増えてきていると思います。
このプラグインではデフォルトで、[succsess/info/error]の三種類があり、特別な設定無しに取り入れることができます。
オリジナルのCSSを適用することもできるので、サイトの方向性に合わせてカスタマイズしても良いですね！

インストールはこちら。