のんラボ

僕がVueで使用している便利パッケージを教えます!

2019/06/28 2019/06/28 僕がVueで使用している便利パッケージを教えます!

Vueで使える!便利なパッケージ一覧

最初に

これ、ちゃんと一つずつ説明しながら記事にしたい。
なので、この記事はとりあえず作成したみたいな感じです。

Vue-CropperJs

前に書いたCropper.jsのVue版ですね。
Vueはラップするのも得意なので、こういうバニラで書かれたライブラリをVue化するというプロジェクトは結構見かけますし、多いですね。

似たようなラッププロジェクトが存在しますので、用途によって使うものを選択すればいいですよ。

Vue-Google-AdSence

これは今年の抱負メーカーの記事で少し触れましたね。
Vueを導入すると、Vueの中にプレーンなjavascriptを記載することはできますが、外部スクリプトを記載(WEB上で読み込んだり)は怒られてしまいます。そこで、このプロジェクトができたのでしょう。

copied.<!-- 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

についてはそのうち時間ができたら纏め直そうと思う。
本当に便利なので、今後もお世話になりそうですし、宣伝しておきたい。
こういうの嫌う人もいるけど、効率化を本気で求めるなら、できている物は使わないとね。