LoginSignup
3
0

Vue3でよく使うパッケージまとめ

Posted at

はじめに

Vue3で使用頻度の高い(主観です)パッケージを列挙しています。
各パッケージの深い説明はありません。一言+githubのURLのみ記載しています。
Vite・VuetifyでSPA開発するときに使ったパッケージ群なので偏りがあるかと思います。他にもこういうのもあるよ!これ便利だよ!みたいのがあればコメントいただけると幸いです。

アプリケーション関連

Vue

説明不要と思います。
Vue3とVue2でgithubのサイトが異なるので見間違え注意。
https://github.com/vuejs/core
※Vue2だとhttps://github.com/vuejs/vue

Vue Router

ルーティングを制御します。
Vue3の場合はVue Router4.xが対応します。
https://github.com/vuejs/router

Pinia

状態管理を実現します。vuexの後継です。
https://github.com/vuejs/pinia

Vue I18n

多言語化を実現します。(I18n = Internationalization)
https://kazupon.github.io/vue-i18n/

Vite

ビルドツール。
Vue2で主流だったvue-cliよりも処理が早い。
https://github.com/vitejs/vite

UI

Vuetify

マテリアルデザインなUIライブラリ。
https://github.com/vuetifyjs/vuetify

vite-plugin-vuetify

コンポーネントを自動インポートできる等のVuetify向けプラグイン。
https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin

特化した機能を持つもの

vue-chartjs

グラフ(チャート)を描画するライブラリであるchart.jsのVue向けラッパー。
https://github.com/apertureless/vue-chartjs

VueUse

Vue向けの多彩なユーティリティ(200種類以上?)を持つライブラリ。
https://github.com/vueuse/vueuse

Vue3 Pdf App

PDF.jsベースのVue向けPDFビューア。
https://github.com/stellR42/vue3-pdf-app

Axios

HTTPクライアント。
https://github.com/axios/axios

単体テスト

Vitest

Viteベースのテストフレームワーク。
https://github.com/vitest-dev/vitest

Vue Test Utils

コンポーネントをテストするためのライブラリ。
https://github.com/vuejs/test-utils

vue-router-mock

Vue Routerのモック。
https://github.com/posva/vue-router-mock

axios-mock-adapter

Axiosを使うならモックはこれを使用します。
https://github.com/ctimmerm/axios-mock-adapter

静的解析

eslint-plugin-vue

Vue向けのESLint。ESLintと合わせて使います。
https://github.com/vuejs/eslint-plugin-vue

おまけ:パッケージではないですがよく使うツール類

vue-devtools

chrome拡張のデバッグツール。
https://github.com/vuejs/devtools
chromeウェブストア

Vetur

VSCodeの拡張機能。シンタックスハイライト・インテリセンス等々多数の機能を持ちます。
https://github.com/vuejs/vetur

Vue Peek

VSCodeの拡張機能。テンプレート内のタグ名から定義元のコンポーネントに移動する等、コーディング時のファイル移動を効率化します。
https://github.com/vuejs/vetur

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0