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

2020-05-16
vue.jsnuxt.js
    

目次

概要

Vue.jsで作成されたプロジェクトを紹介しているサイト 「made with vue.js 」があります。

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

UIコンポーネント

VueSocial

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

image.png

CKEditor 5

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

image.png

Vue.Draggable

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

Vuetable 2

データテーブルのコンポーネント。demo

image.png

vuejs-datepicker

vueのdatepicker

Kalendar

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

image.png

Vue Apexcharts

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

image.png

Vue.js Google Charts

VueのGoogle Charts

image.png

vue-cart

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

image.png

WebIDE

VSCode風WebIDE

image.png

vue-github-activity

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

image.png

vue-moment

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

image.png

テーマ系ライブラリ

VueBase

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

image.png

Vuestic Admin

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

image.png

Vue Material Admin

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

image.png

Vue CRUD

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

サイト・サービス

MyOngoingsCalendar

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

image.png

CrashTested

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

image.png

Metal Map

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

image.png

Playlister.me

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

image.png

ReleaseAlert

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

image.png

tuneIn

音楽を見つけるアプリ

image.png

vuetube

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

image.png

Faviator

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

image.png

ツール

Postwomen

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

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

image.png

DrawSQL

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

image.png

Labnotebook

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

image.png

VivifyScrum

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

image.png

ShapeForMe

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

image.png

Periodicity

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

image.png

drawmote

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

image.png

Asciiur

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

image.png

DBFS-Explorer

image.png

vue-s3-dropzone

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

Avatar URL Generator

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

image.png

ParaView Glance

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

image.png

CMS

WP Vue

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

image.png

Photon CMS

Laravel + Vueで作られた Headless CMS

image.png

Laravel Nova

Laravel用のテンプレート

image.png

Saleina CMS

静的CMS

image.png

Directus

Headless CMS

ゲーム

vue-tetris

image.png

Space Snake

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

image.png

Defuse

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

image.png

Rotten Soup

ローグライクなゲーム

image.png

    

関連記事

SQL整形ツールを作成した
特徴 使い方 FW/ライブラリ等 nuxt sql-formatter-plus Monaco Editor おまけ ソース SQL整形ツールを作成しました。 URLはこちらです。 SQL…

Firebase + Nuxt で認証付きページを作るときに参考にしたいところ
Webアプリケーションのセッション管理にJWT導入を検討する際の考え方 Service Worker によるセッション管理 ユーザー セッションの管理 Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する CookieとセッションとJWT SSR…

shields.io用アイコンジェネレータを作ってみた
デモ 情報 参考 ソース shields.io用アイコンジェネレータを作ってみました。 デモ 情報 Vue + codesandboxで作ってみました。 詳しい作り方はここを参考にしてください。 参考 https://tech-blog.s-yoshiki…

MonacoEditor + Vue を使ってエディタを実装
紹介 セットアップ Vue vue-monaco Usage サンプルコード ポイント テーマカラーについて エディタのリサイズ エディタの変更の検知 Vue + MonacoEditorでJS…

画像のプーリング処理 canvas + JavaScript
プーリング処理について サンプルソース デモ 参考文献 JavaScriptで画像のプーリング処理を行ってみました。 プーリング処理について プーリングは畳み込みに似た処理で、CNN…

ブラウザで動くAtCoder用のデバッガを作ってみた (JSのみ)
AtCoder-JsDebugger 説明 フレームワーク、ライブラリなど ブラウザで完結するAtCoder用のデバッガを作ってみました。 対応言語は(JS)のみになっています。 というのも、書いたコードをブラウザ上でeval…

JavaScriptで画像処理100本ノックに挑戦してみた
画像処理100本ノックについて JavaScriptで挑戦してみる デモサイト GitHub フロントの実装について 問題の解説 JSで挑戦するメリット・デメリット 関連 画像処理100本ノックをJavaScriptで挑戦してみました。 Qiita…

vue-cli3のセットアップと開発サーバ起動からバンドルファイル生成まで
検証環境 vue@cliの導入 vueプロジェクトの作成 開発・本番ビルドの設定 各項目の設定 参考 Vue.jsで作ったアプリをGitHub Pagesで公開する方法について。 検証環境 nodejs 11.10.0 npm 6.7.0 vue@cli 3.…

最新の投稿

Node.js で作成した REST API を Docker化
Node.jsでREST APIを作成 コンテナ化 コンテナ化定義 コンテナ化作業 参考 Node.js で作成した REST API を Docker化した際のメモです。 Node.jsでREST APIを作成 まずはNode.js…

JavaScriptで優先度付きキューを実装する
優先度付きキューについて ソース 参考 JavaScriptで優先度付きキュー (プライオリティキュー) を実装する 優先度付きキューについて 具体的には次のような機能があります。 キューに対して要素を優先度付きで追加 (push…

AWS Amplify で コンテナベースのデプロイを行い REST API を構築
検証した環境 やってみる 初期準備 パイプラインを確認 終了処理 参考 AWS Amplify で コンテナベースのデプロイを行い REST API を構築した際のメモです。 検証した環境 amplify 5.1.…

Pythonでソケット通信を実装しメッセージの送受信を行う
ソース server.py client.py 動かしてみる 参考 Pythonでソケット通信を実現する方法です。 ソース server.py サーバ側のソースです。 client.py…

next_permutationをJSで実装する
ソース 使い方 参考 C++で提供されている順列を生成する next_permutation のJS実装です。 ソース 順列が存在する場合はtrueを返し、そうでなければfalse…

応用情報技術者試験の合格体験記
受験時のステータス 受験結果 対策 スケジュール 午前問題 午後問題 参考書等 令和…

[JS]ラジアンから度数に度数からラジアンに変換する
コード 度数からラジアンへ ラジアンから度数へ サンプル ラジアンから度数に度数からラジアンに変換する際のスニペット。 コード 度数からラジアンへ ラジアンから度数へ サンプル

CentOS8 に Python + OpenCV をインストール
インストール テスト CentOS8 で標準で提供されているパッケージで Python + OpenCV 環境を構築する方法です。 検証した環境は CentOS8.3 (Docker) です。 インストール まず opencv…

[Perl] CentOS8 に plenv をインストール
インストール Step1 事前準備 Step2 PATHを通す (README通りにインストール) Step2 PATHを通す ($HOME以外にplenvをインストール) Step3 Perlインストール Step4 cpanmインストール CentOS…

JS/TSのclassでclass名を取得する
コード JS/TSのconstructorを利用して自分自身のクラス名を取得する際のメモ。 コード このコードの結果は次のようになります。

Tags

Dates

s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV
© 2021   404 motivation not found