Nuxt.js
vue-chartjs、便利だけど、 数値とかデータラベルがほしいなと思って調べたときの備忘録。 chart.jsのプラグインでchartjs-plugin-datalabelsというのがあるらしい。 こんな感じのができる(´ω｀) インストール $ npm i vue-chartjs chartjs chartjs-plugin-d…
Nuxt.jsの公式ツイッターを見てたら、いい感じのモジュールがあったので、試してみたときの備忘録。 Introducing @nuxt/components ✨No need to import your components anymore ✅ Scan and auto import components✅ Multiple paths with customisable prefi…
以前の記事でvue-fontawesomeを使って、FontAwesome5を使えるようにしたけど、 nuxt-fontawesomeというもっと便利なのがあったので、試してみたときの備忘録。 便利だけでどデフォルトをFontAwesomeにしないといけないっぽい感じなので、併用していると難し…
スマホだといろんなアプリに送れたりするシェア機能がある。 WebサイトでもWeb Share APIを使うとできるらしいので試してみた。 サポート状況は、SafariとAndroidのChromだけ。 ・Can I use... Support tables for HTML5, CSS3, etc 使い方 すごく簡単。 pri…
クリップボードコピーについて、いろいろやってみてるけど、 nuxt-clipboard2を使うとすごく簡単だった。ので、そのときの備忘録。 nuxt-clipboard2は、vue-clipboard2のNuxtモジュールで、 vue-clipboard2は、clipboard.jsのVueライブラリ インストール $ n…
TypeScriptでNuxtしたくて、vuex-module-decoratorsとnuxt-client-initを使ったら、 nuxtClientInit内で$axiosがnullだったときの備忘録。 Nuxt TypeScriptのストアのガイドを見ているけど、 プラグインのほうが後に呼ばれるので、自分で初期化しないといけ…
Django+DRFとNuxtで開発するときに、 snake_caseで書いてcamelCaseで受け渡ししたいなと思ったときに調べたときの備忘録 djangorestframework-camel-caseを使うと簡単にできた。 インストール $ pip install djangorestframework-camel-case setting.pyの変…
画面外のときは描画しないようにし、無限ローディング時の性能改善したときの備忘録。 vue-observe-visibilityを使って、画面内かを検知して表示を切り替えてみた。 インストール まずはインストール。 $ npm install --save vue-observe-visibility # IEな…
VueとNuxtでアニメーションをするときに調べたところのまとめ。 公式サイトを読みながら、関連するとこをまとめた感じの備忘録。 トランジションクラスってのがあるらしい 参考: Enter/Leave とトランジション一覧 — Vue.js <transition>で囲むと、いくつかのクラスを生</transition>…
よくある編集中に、ページを離れると、 「編集中のデータが消えちゃうよ」 と教えてしてくれるやつを調べたときの備忘録。 ページを閉じるときに出るこんなのや 戻るや別のページに移動しようとするときに出るこんなの ソースコード 中身はこんな感じ。Mixin…
GAEでNuxtのSSRを試してみたけど、メモリが足りずに落ちる。。 Herokuは無料で512M使えるので、こっちも試してみる。 ただ、無料版だとHTTPS化できないのでCloudflareも一緒に。 Herokuでデプロイできるようにする まずは、NuxtアプリをHerokuにデプロイでき…
SVGでOGP画像を作りたいなと思い、いろいろ調べたときの備忘録。 SVGはまるのも多いけど、いろいろできるので、 SVGからOGP画像をつくるのいいかもしれない。 とりあえず、SVGを書いてみる ちょろっとなるなら、HTMLでベタ書きしてみるのもいい。 動作確認と…
匿名認証を使えるといいなと思ったので、いろいろ調べてみたときの備忘録。 Firebase UIを使うと簡単にできた。 匿名アカウントでログインする こんな感じ。signInAnonymously()を呼べばOK。 // 初期化済みのfirebaseインスタンス。詳細は略 import firebase…
Nuxt.jsで環境変数の設定にdotenvを使ってたときの備忘録。 起こった現象 ソースディレクトリの場所を変えようと、 nuxt.config.tsにsrcDirを設定したら、うまく動かず。。 ディレクトリはこんな感じ。 / app/ .env nuxt.config.ts nuxt.config.ts内では、pr…
開発している積読ハウマッチで、Googleアカウントでのログインに対応した際、 Firebase Authの認証フローをポップアップからリダイレクトに変えてみた。 ポップアップだと、どこでもログインできたけど、 ログイン画面だと元のページに戻りたく、いろいろ考…
Netlifyがいいと聞いて、Firebase Hostingから移行してみたときの備忘録。 NetfilyのプレレンダリングがあるのでOGP芸が楽。 昔、こんな記事を書いたけど、Functionsで頑張らなくてもよくなった。 使ってみてよかったので、移行したときにやったことをまとめ…
FirebaseとSSRなNuxt.jsでアプリを作っていて、 クライアント側で認証チェックするとFirebaseの初期化などでラグが... サーバ側で認証情報とかを取得してもう少しなんとかできないかなと。 まだベータっぽい?けど、公式の以下の内容を試してみたときの備忘録…
Nuxt.js、SSRで実行すると外部サーバなしでAPIを簡単に追加できるらしい。 serverMiddlewareを使ってルートを追加するとAPIが作れたので、その時の備忘録。 つかってみる APIをつくる // ~/server/echo.ts import { IncomingMessage, ServerResponse } from …
NuxtのSSRで認証したいなと思ったら、こんな記事を見つけたので、試してみたときの備忘録。 SSRモードのNuxtでのFirebase認証 - Qiita 結果、UIDは取得できるけど、firebase-adminで検証が必要っぽい... インストール cookieを扱うライブラリはいろいろある…
公式ガイドのストアのページで紹介されていたvuex-module-decorators。 nuxtServerInitをどこに書けばいいか迷ったので、いろいろ調べたときの備忘録。 こんな感じでstore/index.tsに追加するっぽい import { ActionTree, Store } from "vuex"; import { Act…
開発しているWebサービス、少し初期表示が遅いので、少しずつ改善中... Vueの非同期コンポーネントを使うと改善されるよう。 とりあえず置換しただけだけど、赤だったPerformanceが オレンジになった(´ω｀) こんな感じに書き換える。 import { Component, Vu…
開発しているWebサービスでFont Awesomeのお世話になってる。 ただ、Web Font版を使っていたので、読み込みが遅い。。 SVG版だとアイコンごとにimportできるようなので、 性能改善の一環でやってみたときの備忘録。 インストール まずはnpmでパッケージをイ…
積読ハウマッチをNuxt.jsのSPAで作ってみたけど、 静的ページじゃないので、NuxtのSitemap Moduleだと微妙... なので、CloudFunction for Firebaseを使って、 サイトマップを自動生成するようにしてみたときの備忘録。 sitemap.xmlのサンプル sitemapの形式…
最近つくった積読ハウマッチをNuxtのSPAで作成しているけど、 シェアされたときにいい感じに画像とかを表示してほしいのでやってみた。 N番煎じ感がつよいけれど、自分の整理用〜 全体の流れ 該当のURLにアクセスがあったらリライトでFunctionを呼び出す(Hos…
Nuxt.jsでOSやブラウザごとに挙動を変えたいなと思い、 いろいろ調べていたらユーザエージェントをいい感じに判定できるやつが！ nuxt-user-agentを調べたときの備忘録 準備する インストール $ npm i -S nuxt-user-agent nuxt.config.jsの設定 const config…
スマホ用にボトムナビゲーションをつけてみたけど、 INPUTのフォーカス時に邪魔なので、消したいなと。。 フォーカス中かどうかをは判定するために、いろいろ調べたときの備忘録 @focusと@blurでイベントを取得する フォーカスすると、@focusが呼ばれ フォー…
フロントエンドでFirebase Crashlyticsみたいに、 Web上でログ情報を集めるようにしたいなと思い、いろいろみていたら、 Sentryというログ収集サービスがあったので、使ってみたときの備忘録 インストール $ npm i @nuxtjs/sentry nuxt.config.tsの設定 nuxt…
トップに戻るとか、ページ内リンクで移動するとかしたいなと思ったときの備忘録。 vue-scrollto便利！ トップに戻るボタンほしいなと思ったら、簡単につけれた！Vueすごい...(*´ω｀*) pic.twitter.com/dRlanENnxd— きらぷか積読ハウマッチ開発中【事前登録は…
よく右下に出てくる一番上まで戻るボタンがほしいなと思い、やってみたときの備忘録。 トップに戻るボタンほしいなと思ったら、簡単につけれた！Vueすごい...(*´ω｀*) pic.twitter.com/dRlanENnxd— きらぷか積読ハウマッチ開発中【事前登録はじめました】 (@…
無限スクロールしたいなぁと思ったら、 vue-infinite-loadingという便利があったので、その時の備忘録。 おぉ無限スクロールもできた(*´ω｀*)Vueもvue-infinite-loadingもすごい(*´ω｀*) pic.twitter.com/dtp1sxYUyz— きらぷか積読ハウマッチ開発中【事前登…
