くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Nuxt+Buefyでアクションシートをつくってみる

入力フォームが下からスライドして出てくるUIがいいなと思い、 Buefyでやってみたときの備忘録。 Nuxt/Vueのtransitionを使うとできた(´ω`) こんな感じ <template> <transition name="modal"> <div class="modal modal-sheet is-active" v-if="active"> <div class="modal-background" @click="close"></div></div></transition></template>

vue-chartjsでdata labelを使えるようにする

vue-chartjs、便利だけど、 数値とかデータラベルがほしいなと思って調べたときの備忘録。 chart.jsのプラグインでchartjs-plugin-datalabelsというのがあるらしい。 こんな感じのができる(´ω`) インストール $ npm i vue-chartjs chartjs chartjs-plugin-d…

@nuxt/componentsを使って、コンポーネントのimport文を不要にする

Nuxt.jsの公式ツイッターを見てたら、いい感じのモジュールがあったので、試してみたときの備忘録。 Introducing @nuxt/components ✨No need to import your components anymore ✅ Scan and auto import components✅ Multiple paths with customisable prefi…

FirestoreのonSnapshotでリアルタイム同期する

firestore便利だけど、getしか使ったことなかった。。 onSnapshotを使うと、変更されたデータを受け取れるので、試してみたときの備忘録。 ドキュメントはこれをみた。 ・Cloud Firestore でリアルタイム アップデートを入手する | Firebase 使い方 こんな感…

FontAwesome5をNuxt+Buefy(Bulma)で使えるようにする

以前の記事でvue-fontawesomeを使って、FontAwesome5を使えるようにしたけど、 nuxt-fontawesomeというもっと便利なのがあったので、試してみたときの備忘録。 便利だけでどデフォルトをFontAwesomeにしないといけないっぽい感じなので、併用していると難し…

スマホのシェア機能にWeb Share APIを使ってみる

スマホだといろんなアプリに送れたりするシェア機能がある。 WebサイトでもWeb Share APIを使うとできるらしいので試してみた。 サポート状況は、SafariとAndroidのChromだけ。 ・Can I use... Support tables for HTML5, CSS3, etc 使い方 すごく簡単。 pri…

Nuxtで簡単にクリップボードへコピーする(nuxt-clipboard2)

クリップボードコピーについて、いろいろやってみてるけど、 nuxt-clipboard2を使うとすごく簡単だった。ので、そのときの備忘録。 nuxt-clipboard2は、vue-clipboard2のNuxtモジュールで、 vue-clipboard2は、clipboard.jsのVueライブラリ インストール $ n…

コマンドでpng画像を圧縮/軽量化する(pngquant)

PNGの軽量化をWebサービスを使ってやっていたけど、 コマンドでやりたくなったので調べてみたときの備忘録。 pngquantというのがあるらしい。。 インストール $ brew install pngquant 圧縮する # 上書き保存(-f --ext) $ pngquant -f --ext .png image.png …

Vercel(ZEIT now)のServerless FunctionでTypeScriptの最小構成

前も書いたけど、ZEITからVercelになったらしく、 だいぶ楽にFaaSできるようになったので試してみた。すごく簡単だった。。(´ω`) このサンプルのソースはこちら。 使ってみる インストールとか # package.jsonの作成 $ npm init # 必要なパッケージをインス…

Nuxt/TS】vuex-module-decorators+nuxt-client-initで、nuxtClientInit内で@nuxt/axiosが取得できないときの対処法

TypeScriptでNuxtしたくて、vuex-module-decoratorsとnuxt-client-initを使ったら、 nuxtClientInit内で$axiosがnullだったときの備忘録。 Nuxt TypeScriptのストアのガイドを見ているけど、 プラグインのほうが後に呼ばれるので、自分で初期化しないといけ…