はじめに

apertureless/vue-chartjs でチャートの高さ(や幅、サイズ)を変更する方法

TL;DR

  • チャート要素に widthheight を設定
  • 親要素の widthheightvw, vh で指定する方法もある
  • ウィンドウのリサイズなども考え出すと割と茨の道っぽい
    • ベストプラクティスが見つかってない(自分的には)
続きを読む

はじめに

Vue でローソク足(OHLC)チャートをプロットする方法。

TL;DR

  • npm i chart.js vue-chartjs vue-chartjsfinancial でインストール
  • JS ファイルと Vue ファイルに分けて実装するのが良い
    • リアクティブにグラフを更新できる (癖があるので注意)
  • 全部 from 'vue-chartjs-financial'import するのが安全そう
  • 細かい設定は chart.js 本家のドキュメントを参照
続きを読む

はじめに

Simonwep/pickr でカラーピッカー(Color Picker)を作成する方法

TL;DR

  • Simonwep/pickr について簡単に整理した
  • テーマが3つ用意されており、細かいカスタマイズも簡単にできる
  • イベントが一通り揃っておりユーザー操作に合わせて独自処理を行うなども簡単に対応できる
続きを読む

はじめに

Cordova iOS アプリ, Android アプリで Twitter Timeline の埋め込みを実現する方法。

TL;DR

1
2
3
4
<allow-navigation href="https://*twitter.com/*" />
<allow-navigation href="https://cdn.syndication.twimg.com/*" />
<allow-navigation href="about:*" />
<!-- <allow-navigation href="*" /> 1つでも OK -->
続きを読む

はじめに

Cordova iOS アプリで axios を使っての API Request が Network Error となる場合の回避策。

TL;DR

続きを読む

はじめに

Vuex の状態を robinvdvleuten/vuex-persistedstatelocalStorage などに永続化する方法。

TL;DR

  • npm i vuex-persistedstate でインストール
  • plugins で設定するだけで OK
  • localStorage 以外を使いたい場合は storage オプションで設定
    • sessionStorage, Cookie, localStorage + 暗号化, etc
続きを読む

はじめに

「Vue.js で○○を実現するライブラリを探したい」というときは Awesome Vue.js を使うと便利、というだけの話。
リポジトリは vuejs/awesome-vue

公式ページ上でも、GitHub(リポジトリ トップ) 上でも情報を探せるようになっている。

GitHub 上で見る場合は、スクロールバーのサイズ(ページの長さ)や目次のデカさを見て探す気が失せるかもしれないが、目次の「Components & Libraries」を見て自分の見たい箇所だけチェックするという使い方で OK。
もしくは 「Ctrl(Cmd) + F」 で探すとかでも良いと思う。

あとは各ライブラリのリポジトリで詳細を確認し、自分のプロジェクトにマッチするかどうか、スター数、コミット頻度(放置されてないか)などで、どれを使うかを判断すれば良い。

その他・メモ

わかりにくいけど公式ドキュメントにも awesome-vue へのリンクはある。(自分は Google 検索から、たまたま awesome-vue にたどり着いた)


プラグインの使用 の下記

コミュニティの貢献による膨大なプラグインやライブラリは awesome-vue で確認できます。

Using a Plugin の下記

Checkout awesome-vue for a huge collection of community-contributed plugins and libraries.


もしくは

エコシステムを調べる の下記

The Awesome Vue Page: 他の素晴らしい人々によって公開された素晴らしいリソースを参照します。

Explore the Ecosystem の下記

The Awesome Vue Page: See what other awesome resources have been published by other awesome people.

参考文献

コメント・シェア

はじめに

Vue.js で PeachScript/vue-infinite-loading を使った無限スクロール(Infinite Scroll)の実装方法。

TL;DR

  • npm i vue-infinite-loading でインストール
  • <infinite-loading @infinite="infiniteHandler" /> を記述
  • infinite イベントのハンドラ内でデータの追加や、読み込み完了などの処理を実施
続きを読む

r17n


Softwear Engineer


Fukuoka