概要
Vue.jsのキャッチアップに有効だと思った情報源のまとめです。技術書もキャッチアップに有効だと思いますが、この記事ではweb上の情報に絞りました。
リンク集のような内容なのでサーチエンジンにインデックスされないように限定共有投稿にしています。
Official
一番の情報源はオフィシャルサイトのドキュメントになると思います。大変有り難いことに日本語にローカライズされています。
- [Vue.js] (https://jp.vuejs.org/)
- [Introduction vue-router] (https://router.vuejs.org/ja/)
- [Introduction vue-loader] (https://vue-loader-v14.vuejs.org/ja/)
- [Introduction vue-server-renderer] (https://ssr.vuejs.org/ja/)
- [Introduction Vuex] (https://vuex.vuejs.org/ja/)
GitHub
- [vuejs] (https://github.com/vuejs)
- [Issues / Pull Request] (https://github.com/vuejs/vue/issues)
Vue.js Ecosystem
Vue.jsのEcosystemは[vuejs/awesome-vue - GitHub] (https://github.com/vuejs/awesome-vue)で調べることができます。
Official
vue-router
SPA 向けのルーティングシステム
- [vuejs/vue-router] (https://github.com/vuejs/vue-router)
vuex
Flux-inspired の状態管理
- [vuejs/vuex] (https://github.com/vuejs/vuex)
vuefire
Firebase bindings for Vue.js
- [vuejs/vuefire] (https://github.com/vuejs/vuefire)
> npm install vue firebase vuefire --save
Cloud Firestoreの対応は未だ(2018年5月現在)のようです。
ロードマップは[Firestore Roadmap #145] (https://github.com/vuejs/vuefire/issues/145)で確認できます。
Third party library
[Bootstrap Vue] (https://bootstrap-vue.js.org/)
Build responsive, mobile-first projects on the web using Vue.js and the world's most popular front-end CSS library — Bootstrap V4.
- [Bootstrap Vue - GitHub] (https://github.com/bootstrap-vue)
- [bootstrap-vue - npm] (https://www.npmjs.com/package/bootstrap-vue)
> npm install bootstrap-vue --save
[Popper.js] (https://popper.js.org/)
A KICKASS LIBRARY
USED TO MANAGE POPPERS IN WEB APPLICATIONS
NOW MUCH MORE POWERFUL!
- [FezVrasta/popper.js - GitHub] (https://github.com/FezVrasta/popper.js)
- [popper.js - npm] (https://www.npmjs.com/package/popper.js)
- [RobinCK/vue-popper - GitHub] (https://github.com/RobinCK/vue-popper)
- [vue-popperjs - npm] (https://www.npmjs.com/package/vue-popperjs)
- VueJS popover component based on popper.js
> npm install popper.js --save
or
> npm install vue-popperjs --save
axios
Promise based HTTP client for the browser and node.js
- [axios/axios - GitHub] (https://github.com/axios/axios)
- [axios - npm] (https://www.npmjs.com/package/axios)
- Promise based HTTP client for the browser and node.js
- [imcvampire/vue-axios - GitHub] (https://github.com/imcvampire/vue-axios)
- [vue-axios - npm] (https://www.npmjs.com/package/vue-axios)
- A small wrapper for integrating axios to Vuejs
> npm install axios --save
or
> npm install --save axios vue-axios
[Moment.js] (https://momentjs.com/)
Parse, validate, manipulate, and display dates and times in JavaScript.
- [moment/moment - GitHub] (https://github.com/moment/moment/)
- [moment - npm] (https://www.npmjs.com/package/moment)
- A lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.
- [brockpetrie/vue-moment - GitHub] (https://github.com/brockpetrie/vue-moment)
- [vue-moment - npm] (https://www.npmjs.com/package/vue-moment)
- Handy Moment.js filters for your Vue.js project.
> npm install moment --save
or
> npm install vue-moment --save
vue-resource
- [pagekit/vue-resource - GitHub] (https://github.com/pagekit/vue-resource)
- [vue-resource - npm] (https://www.npmjs.com/package/vue-resource)
- The plugin for Vue.js provides services for making web requests and handle responses using a XMLHttpRequest or JSONP.
もともとVue.jsの公式ajaxライブラリの位置付けのようでしたが、[vue-resourceの引退について] (https://jp.vuejs.org/2016/11/03/retiring-vue-resource/)で説明されている通り、公式でサポートするライブラリではなくなりました。
vue-meta
- [declandewet/vue-meta - GitHub] (https://github.com/declandewet/vue-meta)
- [vue-meta - npm] (https://www.npmjs.com/package/vue-meta)
- Manage page meta info in Vue 2.0 components. SSR + Streaming supported. Inspired by react-helmet.
> npm install vue-meta --save
vue-content-loader
SVG component to create placeholder loading, like Facebook cards loading.
- [egoist/vue-content-loader - GitHub] (https://github.com/egoist/vue-content-loader)
- [vue-content-loader - npm] (https://www.npmjs.com/package/vue-content-loader)
- SVG component to create placeholder loading, like Facebook cards loading.
> npm install vue-content-loader --save
Framework
[Nuxt.js - Universal Vue.js Applications] (https://ja.nuxtjs.org/)
Nuxt.js とはユニバーサルな Vue.js アプリケーションを構築するためのフレームワークです。
サーバサイドとクライアントサイドの違いを抽象化することで無視して、一貫した方法で UIレンダリングすること に焦点を当てています。
- [NUXT - GitHub] (https://github.com/nuxt)
[VuePress] (https://vuepress.vuejs.org/) (Official)
Minimalistic Vue-powered static site generator
- [vuejs/vuepress - GitHub] (https://github.com/vuejs/vuepress)
[Vue Design System] (https://vueds.com/)
An open source tool for building Design Systems with Vue.js
- [viljamis/vue-design-system - GitHub] (https://github.com/viljamis/vue-design-system)
[Vuikit] (https://vuikit.js.org/)
A consistent and responsive Vue UI library, based on the front-end framework UIkit.
- [vuikit/vuikit - GitHub] (https://github.com/vuikit/vuikit)
[Vuetify] (https://vuetifyjs.com/ja/)
Material Design Component Framework
Storybook
Storybook for Vue
You may have tried to use our quick start guide to setup your project for Storybook. If you want to set up Storybook manually, this is the guide for you.
Examples & Tutorials & How to
[Vue.js Examples] (https://vuejsexamples.com/)
サイト名の通り、Vue.jsを使ったUIやform、コンポーネントのExample集です。
[Vue.js Developers] (https://vuejsdevelopers.com/)
[AppDividend - Vuejs Tutorials] (https://appdividend.com/category/vuejs/)
[Posts About Vue.js ← Alligator.io] (https://alligator.io/vuejs/)
Udemy
UdemyというEラーニングサイトにVue.jsの学習コースがあります。有償かつ英語です。
学習コースの利用経験はありませんが、youtubeで一部の学習コースを観ることができます。
[Build Web Apps with Vue.js & Firebase] (https://www.udemy.com/build-web-apps-with-vuejs-firebase/)
- Vue & Firebase Real-time Chat (Preview) #1 - Intro
[Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)] (https://www.udemy.com/vuejs-2-the-complete-guide/)
- Uploading Images | Vue.js + Vuetify + Firebase FULL PROJECT
User Community
[Vue Forum] (https://forum.vuejs.org/)
オフィシャルのフォーラムです。メインのカテゴリに”General Discussion”、"Get Help"、”Show & Tell”があります。また、”日本語”というカテゴリがあり、日本語で質問ができます。(が、あまり活発ではないようです。)
[reddit - r/vuejs] (https://www.reddit.com/r/vuejs/)
redditに”r/vuejs”というsubredditがあります。ここでもユーザー同士で情報の交換が行われています。
Stackoverflow
Vue.js
Vue.jsの開発者(committer)の方(個人の立場かどうかはわかりません)が回答されているものも見かけます。
[Evan You] (https://stackoverflow.com/users/1070244/evan-you)
- [Why is Vue.js using a VDOM?] (https://stackoverflow.com/questions/44238139/why-is-vue-js-using-a-vdom/44239732)
- [How to determine when Vue has finished updating the DOM?] (https://stackoverflow.com/questions/29471291/how-to-determine-when-vue-has-finished-updating-the-dom/29481966)
[mysticatea] (https://stackoverflow.com/users/3502496/mysticatea)
- [Which eslint rules in my config are slow?] (https://stackoverflow.com/questions/38458067/which-eslint-rules-in-my-config-are-slow/38470775)
[Nick Messing] (https://stackoverflow.com/users/3160654/nick-messing)
- [Straightforward Way to Extend Class in Node.js] (https://stackoverflow.com/questions/36726512/straightforward-way-to-extend-class-in-node-js/36726614)
- [Vue.js - Add or set new data to array in store] (https://stackoverflow.com/questions/37118702/vue-js-add-or-set-new-data-to-array-in-store/37118968)
[Posva] (https://stackoverflow.com/users/3384501/posva)
- [Vue.js binds inline style expressions when rendering an Array] (https://stackoverflow.com/questions/39753116/vue-js-binds-inline-style-expressions-when-rendering-an-array/39770533)
[Blake Newman] (https://stackoverflow.com/users/2684385/blake-newman)
- [Vue.js 2 router only loading component from navigation and not from URL] (https://stackoverflow.com/questions/42392034/vue-js-2-router-only-loading-component-from-navigation-and-not-from-url/43018360)
[Guillaume Chau] (https://stackoverflow.com/users/7640335/guillaume-chau)
- [vuejs v-model, multiple checkbox and computed property] (https://stackoverflow.com/questions/42248888/vuejs-v-model-multiple-checkbox-and-computed-property/42527985)