Vueで使える!便利なパッケージ一覧
最初に
これ、ちゃんと一つずつ説明しながら記事にしたい。
なので、この記事はとりあえず作成したみたいな感じです。
Vue-CropperJs
前に書いたCropper.jsのVue版ですね。
Vueはラップするのも得意なので、こういうバニラで書かれたライブラリをVue化するというプロジェクトは結構見かけますし、多いですね。
似たようなラッププロジェクトが存在しますので、用途によって使うものを選択すればいいですよ。
Vue-Google-AdSence
これは今年の抱負メーカーの記事で少し触れましたね。
Vueを導入すると、Vueの中にプレーンなjavascriptを記載することはできますが、外部スクリプトを記載(WEB上で読み込んだり)は怒られてしまいます。そこで、このプロジェクトができたのでしょう。
<!-- Google Ads -->
<div class="text-center">
<Adsense
data-ad-client="ca-pub-5315745554235923"
data-ad-slot="6372572820"
data-ad-format="horizontal"
></Adsense>
</div>
こんな感じで広告表示をすることができます。
vue-tags-input
これはタグ機能の操作に便利。
簡単に言えばQiita風にタグ付けができるようになります。
これのおかげで記事を書くのも簡単です。
toast-ui/vue-editor
ご存じですか??
とんでもない量のUIを作成し、配布しているプロジェクトなんですが、この中にめっちゃくちゃ優秀なMarkdownエディタが存在します。
toast-uiのページ言ってDEMO触ってきたらわかる。
やばい。しかもそれをVueに落とし込む始末。
そのうち有料になりそうで怖いですね。
bootstrap-vue
これはかなり有名ですね。Bootstrapで書かれたコンポーネントを簡単に呼び出す事ができます。記述量が多くなってしまいがちでしたが、この子のおかげで完結にまとまりますね。
少し前まで、日本語入力のバグがありましたが、それも解決されているようです。
Vuetify
これもかなり有名。マテリアルデザインがすごい使いやすい。PWA向きですね。
でも、正直そこまで詳しくはない。
最後に
- Vue-CropperJs
- toast-ui/vue-editor
- vue-tags-input
についてはそのうち時間ができたら纏め直そうと思う。
本当に便利なので、今後もお世話になりそうですし、宣伝しておきたい。
こういうの嫌う人もいるけど、効率化を本気で求めるなら、できている物は使わないとね。