Vue.js
はじめて丸一日あるカンファレンスに参加したけど、 すごく刺激を受けて、いろいろ考える切っ掛けになったので、その備忘録(*´ω｀*) vuefes.jp とりあえず、オープニングムービーから素敵で、 「これが、カンファレンスってやつか。。」と感動してた(*´ω｀*)…
Vue3で登場したComposition APIがNuxt3のデフォルトっぽい。 ただだいぶ書き方が変わったのでそのあたりを調べたときの備忘録。 なぜComposition APIなのか？ | Vue.js Vue2からある書き方は、Options API。 <script setup>構文 新しく増えた<script setup>はこんな感じ。 SFC内でComposi…
以下のガイドラインにあるファイルを使って、 Google SignInボタンを実装したときの備忘録。 ログインにおけるブランドの取り扱いガイドライン | Google Identity Platform | Google Developers background-imageを使って画像を設定し、 疑似要素を使って画…
Nuxtで開発しているWebサービスで、 Google API Client Library for JavaScriptを使いたいなと思ったら、 意外とハマったので、その時の備忘録。 Google API ClientのNode.js版(googleapis)は、 npmでインストールできるけど、 ブラウザ版はCDNなので、いろ…
ブラウザ上でQRコードを生成したいなと探していたら、 よさげなVueコンポーネントを見つけたので、試してみたときの備忘録。 使ったのは、fengyuanchen/vue-qrcode。 soldair/node-qrcodeを使ったVueコンポーネントライブラリ。 インストール まずは、インス…
NuxtアプリのバリデーションにはVeeValidateを使っているけど、 開始日/終了日みたいな相関チェックをしたいなと思ったときの備忘録。 v2だとあるようだけど、v3だとなくなってしまったぽい。。(´・ω・｀) HTML HTMLだとこんな感じ。 追加するルールはafter:…
Buefyを使って開発してるGoogleスプレッドシートをAPI化するサービスで、 フォルダ機能を追加するときにカラーピッカーにいいのないかな〜と思ったら、 Vue Swatchesがとても便利だった(´ω｀) アップデートフォルダ機能を追加しました‼️アプリごとで分類でき…
Nuxt(Vue)を使ってて、中身が同じだけど一部のタグを変えたいなと思ってたら、 Vueにちゃんと用意されてた(´ω｀) <component v-bind:is="currentView"></component> <table> <tr is="my-row"></tr> </table> Buefyとかのtagはこうやってるのか(´ω｀) 以上！！ 参考にしたサイト様 API — Vue.j…
Nuxt(Vue)のバリデーションにVeeValidateを使っているけど、 用意されているルールにURLの形式チェックが無かったので、対応したときの備忘録。 validator.jsを使ってカスタムルールを作成する感じ。 作成したルール /plugins/vue-validate.tsはこんな感じ。…
Nuxtを使ったアプリではBuefyを使っているけど、 BuefyのTooptipが相性が悪く, うまくいかない。。 いろいろ調べたらv-tooktipがよかったので、そのときの備忘録。 v-tooltipの内部では、Popper.jsを使ってるらしい。 なにがうまくいかなかったか BuefyのToo…
こんな感じのプログレスバーを作りたいなと思ったら、 SVGでできたのでその備忘録。 ソースはこんな感じ <circle>を使うと円がかけるので、2つ重ねて、 1つをstroke-dasharrayとstrokeDashoffsetを使って円弧にしている感じ。 <template> <svg height="100%" width="100%" :viewBox="viewbox"> </svg></template></circle>
Nuxtで開発をしてて、ドラッグスクロールしたいなと思ったら、 便利なライブラリがあったので、試したときの備忘録。 ドラッグスクロールは、スクロールするのをマウスホイールじゃなくて、 左クリックを押してドラッグしながら、スクロールするやつ。 デモ…
入力フォームが下からスライドして出てくる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、便利だけど、 数値とかデータラベルがほしいなと思って調べたときの備忘録。 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とNuxtでアニメーションをするときに調べたところのまとめ。 公式サイトを読みながら、関連するとこをまとめた感じの備忘録。 トランジションクラスってのがあるらしい 参考: Enter/Leave とトランジション一覧 — Vue.js <transition>で囲むと、いくつかのクラスを生</transition>…
よくある編集中に、ページを離れると、 「編集中のデータが消えちゃうよ」 と教えてしてくれるやつを調べたときの備忘録。 ページを閉じるときに出るこんなのや 戻るや別のページに移動しようとするときに出るこんなの ソースコード 中身はこんな感じ。Mixin…
開発している積読ハウマッチで、Googleアカウントでのログインに対応した際、 Firebase Authの認証フローをポップアップからリダイレクトに変えてみた。 ポップアップだと、どこでもログインできたけど、 ログイン画面だと元のページに戻りたく、いろいろ考…
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の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— きらぷか積読ハウマッチ開発中【事前登…
