Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス


## [こちらに移行しました。(2020/05/16)](https://tech-blog.s-yoshiki.com/entry/194/)

## 概要

Vue.jsで作成されたプロジェクトを紹介しているサイト 「[**made with vue.js**](https://madewithvuejs.com/) 」があります。

面白くて役立ちそうなツールやサービスをまとめてみました。

## UIコンポーネント

### [VueSocial](https://www.growthbunker.dev/vuesocial/)

ソーシャルサービスのボタンを作成するVueのコンポーネント

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/d3be2ae2-3b89-164f-3fb4-b3a4ae21dfd0.png)

### [CKEditor 5](https://ckeditor.com/ckeditor-5/)

リッチテキストエディタのコンポーネント

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/44e2f418-cee3-747c-0885-b44e6e12cf37.png)


### [Vue.Draggable](https://github.com/SortableJS/Vue.Draggable)

ドラッグ&ドロップのコンポーネント

![](https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/example.gif)

### [Vuetable 2](https://github.com/ratiw/vuetable-2)

データテーブルのコンポーネント。[demo](http://jsfiddle.net/CristiJ/z11fe07p/1318/embedded/result/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/015d3b9f-0c64-40ca-63aa-3e56e33400bb.png)


### [vuejs-datepicker](https://github.com/charliekassel/vuejs-datepicker)

vueのdatepicker

![](https://madewithnetwork.ams3.cdn.digitaloceanspaces.com//spatie-space-production/2060/vue-datepicker.gif)

### [Kalendar](https://kalendar.altinselimi.com/)

Vueのカレンダーコンポーネント

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/9d8334f9-b8bd-c2e0-7280-319ad04a9fac.png)

### [Vue Apexcharts](https://apexcharts.com/vue-chart-demos/)

SVGベースのグラフ可視化コンポーネント

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/7d5e2fd5-9217-6fc4-8c67-cda0926a8d9e.png)


### [Vue.js Google Charts](https://github.com/devstark-com/vue-google-charts)

VueのGoogle Charts

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/84c8652b-9956-eb96-5462-5f164b6c8c3d.png)

### [vue-cart](https://crisgon.github.io/vue-cart/dist/#/)

ショッピングカートのプラグイン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/1d6ff6f6-60e5-b09e-c823-56d7dbeaae47.png)

### [WebIDE](https://ide.lutianyu.com/#/)

VSCode風WebIDE

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/5e9e9b0b-1ded-a990-8e3f-dfae2a2805ab.png)



### [vue-github-activity](https://github.com/lexmartinez/vue-github-activity)

GitHubのアクティビティを表示するアプリ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/ca2ac9f6-65ba-6f7b-a40b-a5928df19ff8.png)

### [vue-moment](https://github.com/brockpetrie/vue-moment)

時間系の処理を行うライブラリのmoment.js のVue版

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/91cd5a21-6a07-487f-e027-d5b624ddb2c4.png)



## テーマ系ライブラリ

### [VueBase](https://vuebase-theme.firebaseapp.com/)

FireBaseライクなテーマを提供するコンポーネント

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/267ca40a-d81f-9b51-d31f-bb62fdbc2bb7.png)

### [Vuestic Admin](https://vuestic.epicmax.co/admin/dashboard)

管理画面系のコンポーネント

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/1541cb88-e253-6e53-d6b5-edc9b2c7f802.png)

### [Vue Material Admin](http://vma.isocked.com/#/dashboard)

マテリアルデザインのコンポーネント

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/f2c1e634-eef7-b9f1-6dcf-e09506e7182a.png)

### [Vue CRUD](https://vue-crud.github.io/)

SPAのCRUDアプリのテンプレート

![](https://madewithnetwork.ams3.cdn.digitaloceanspaces.com//spatie-space-production/2819/vue-crud.gif)


## サイト・サービス

### [MyOngoingsCalendar](https://myongoingscalendar.eu/)

アニメのタイムスケジュールを表示するサイト

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/140bd630-7b60-b378-5d27-b8834f4cc526.png)

### [CrashTested](https://crashtested.co/)

安全なヘルメットを比較できるサイト

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/ffa6f0a6-c0c1-272b-2c71-821759de343b.png)


### [Metal Map](https://metal-map.com/)

世界各国にいるメタルバンドを地域ごとに紹介しているサービス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/9b6af7a7-7fc1-5ece-5c97-f20e23978754.png)


### [Playlister.me](https://playlist.kaoz.space/)

YouTube動画のプレイリストを簡単に作成できるサービス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/2831b239-b603-aec7-f84f-bb9064bfeff3.png)

### [ReleaseAlert](https://releasealert.io/)

映画のリリース日をリマインドしてくれるサービス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/6ca262f2-eca1-68bf-206d-475860d7363d.png)

### [tuneIn](https://tunein.netlify.com/)

音楽を見つけるアプリ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/00a8d3db-2655-ae1d-f746-829c48276baf.png)

### [vuetube](http://vuetube.surge.sh/#/)

Vue関連の動画を集めたサイト

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/e63506de-9659-85cf-7311-28d70d270a3c.png)

### [Faviator](https://www.faviator.xyz/playground)

ブラウザ上でfaviconなどを作成するサービス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/a9ee92d0-6521-ae92-042f-81b177ad7a6c.png)




## ツール

### [Postwomen](https://postwoman.io/)

APIのパラメータのビルドを補助しリクエストを投げるテストツール。

Postmanのブラウザバージョン的なやつ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/c5ee5535-4e9b-f50c-d511-f1189259fc87.png)

### [DrawSQL](https://drawsql.app/)

データベースの関連図を可視化するサービス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/dd056583-7d36-06c1-dd07-125b0891e99c.png)


### [Labnotebook](https://github.com/henripal/labnotebook)

機械学習等の実験データを可視化するツール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/495efb08-1463-69d7-2cc6-3f33bacc2331.png)

### [VivifyScrum](https://www.vivifyscrum.com/)

アジャイルツール (スクラムボード)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/c289fd41-fa70-6d09-3f50-4c21b7c9ab09.png)

### [ShapeForMe](https://shapeforme.com/)

3Dプリント用モデルの作成ツール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/88f0f5d2-d9e5-8405-a9ec-46bd043ddfb1.png)

### [Periodicity](https://periodicity.io/)

Vueで作られた周期表。マウスホバーすると元素の詳細情報を表示する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/c6ce78cc-60a8-698c-7124-327f0ac96ef2.png)

### [drawmote](https://madewithvuejs.com/drawmote)

スマホでディスプレイにお絵かきするアプリ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/4d643fc5-aa5c-0fc1-a63a-9da1ef6947d8.png)

### [Asciiur](https://www.asciiur.com/)

アスキーアートをコレクションしたサイト

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/d0d1c40a-d63a-b9f3-975d-fbc22c4aefe4.png)


### [DBFS-Explorer](https://datathirst.net/projects/dbfs-explorer/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/03275fff-fce9-1390-8606-c19ec7431afe.png)



### [vue-s3-dropzone](https://github.com/kfei/vue-s3-dropzone)

AWS S3にコンテンツをアップロードするサービス

![](https://madewithnetwork.ams3.cdn.digitaloceanspaces.com//spatie-space-production/1185/vue-s3-dropzone.gif)

### [Avatar URL Generator](https://vinicius73.github.io/gravatar-url-generator/#/)

親しみやすい感じのアバターを作成してくれるサービス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/570d10ad-e043-8cee-1d36-e5e740a61514.png)

### [ParaView Glance](https://kitware.github.io/paraview-glance/app/)

3Dモデルなどのデータを可視化してくれるサービス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/83a38bed-622a-ac2a-bbe7-e0fb10711495.png)



## CMS

### [WP Vue](https://github.com/alexmacarthur/wp-vue)

WordPress REST APIを利用するブログのテーマ テンプレート

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/0fad3863-42d6-63ab-e859-96c07bbe45c8.png)

### [Photon CMS](https://photoncms.com/)

Laravel + Vueで作られた Headless CMS

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/ade291ed-92e1-1d7c-7d54-c87a65a91d8f.png)

### [Laravel Nova](https://nova.laravel.com/)

Laravel用のテンプレート

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/15eaed4b-2311-3eab-b04b-4fbdb9783b47.png)

### [Saleina CMS](https://github.com/saleina/SaleinaCMS)

静的CMS

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/97e5529d-cb02-b23c-b839-ae29743fc5db.png)

### [Directus](https://demo.directus.io/admin/#/login)

Headless CMS

![](https://madewithnetwork.ams3.cdn.digitaloceanspaces.com//spatie-space-production/8359/directus2-k.gif)


## ゲーム


### [vue-tetris](https://binaryify.github.io/vue-tetris/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/022a5774-f4fe-cde0-2c4e-52ab142351cf.png)


### [Space Snake](https://github.com/ilyagru/Space-Snake)

デスクトップで遊べるゲームアプリ。Vue + Electron製

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/f7070e52-b35c-799e-f490-293979a49a0d.png)


### [Defuse](https://connexo.de/defuse/)

マインスイーパー的なやつ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/a68aa8bb-f9e7-b4b8-9a3c-2925f8bae34e.png)

### [Rotten Soup](https://rottensoup.herokuapp.com/)

ローグライクなゲーム

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82419/20e59d7c-33e9-b1b1-72c0-4db94b749fa7.png)