Nuxt3でAPIを呼び出したいなと思ったら、axiosを使わなくなったらしい。 Nuxt 2 to Nuxt 3: Component Options 今後はFetch APIか、unjs/ohmyfetchの$fetchを使う形になる。 axiosの場合、開発中などでCORS問題があったりして、 axios-proxyが必要だったけど…

いままでNuxt x Buefy(Bulma)で開発をしていたけど、 いろんなつらみが出てきた。。 なので、Nuxt3 x Tailwindでいい感じにできないか、 調査してみたときの備忘録。 いろんなつらみ 用意されているもの以外のカスタマイズがつらい Bulmaとnuxt/contentsなど…

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コンポーネントライブラリ。 インストール まずは、インス…

ずっとBulmaというかBuefyを使っていたけど、 Bulmaとnuxt/content(の中のPrismJS)の相性が悪い。。 ・BulmaとNuxt/Content(というかPrism.js)の相性が結構辛い - Crieit 今はがんばっているけど、がんばらないでいいように、別のCSSフレームワークを検討中…

Nuxt3がパブリックベータになったので、ちょっとさわってみたときの備忘録。 雛形プロジェクト作って、ドキュメントを読んだ程度。。 Vue3になったのも含め、結構変わっているけど、 かなりはやくなった感じがする(´ω｀) Nuxtのプロジェクトの作成 # プロジ…

NuxtアプリのバリデーションにはVeeValidateを使っているけど、 開始日/終了日みたいな相関チェックをしたいなと思ったときの備忘録。 v2だとあるようだけど、v3だとなくなってしまったぽい。。(´・ω・｀) HTML HTMLだとこんな感じ。 追加するルールはafter:…

「Nuxt Contentでブログを作ろう」など、 Nuxt公式ドキュメントとかでも紹介されてて気になってたNuxt Content。 ブログ作らないから使う時ないな〜っと思ってたけど、 マークダウンでページを作れるんだったらヘルプページとか簡単にできるのでは？ と思い…

Nuxtでビルドするときに、ビルド時のコミットIDとかをファイルに書き出したいなと思ったときの備忘録。 hooksプロパティなんてのがあるらしい。 ・The hooks Property - NuxtJS hooksプロパティ Nuxtのモジュールとかで使うNuxtのイベントのhookがnuxt.confi…

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の公式ツイッターをみてたら良さそうなライブラリが。 画像最適化ライブラリNuxt Imageを試してみたときの備忘録(´ω｀) まとめ 用意されてるコンポーネントを使うと、サイズや形式の変更を自動でしてくれる sizesにも対応していて、画面サイズによって適…

アニメーションライブラリのLottieを使ってみたときの備忘録。 フリーで使えるアニメーションはLottieFilesで公開されてる。 インストール $ npm i lottie-web 表示用のコンポーネントの準備 表示するコンポーネント(LottieView)の用意。 マウントされたらlo…

前回の続き。 www.memory-lovers.blog とりあえず、なんとなくの動きがわかったので、 もう少しコードを書いて試してみる。 試してみたサンプルのソースコードはこちら。 ・memory-lovers/example-stripe-extensions サンプルでできること 簡単なサンプルな…

画像の一部を簡単に切り抜きたいなと思って、いろいろ調べてみたら、 Cropper.jsという便利なライブラリがあったのでお試し(´ω｀) こんなのを作りました(´ω｀) いろいろ遊んでたらなんかできた(*´ω｀*)https://t.co/FPc1ylaVqH pic.twitter.com/KdDLeXiY1q— …

Nuxt+Buefy+VueValidate+TypeScript ひさびさにVeeValidateを見てみたら、 使いやすくなっていた気がするので、いろいろ調べたときの備忘録。 インストール $ npm i vee-validate tsconfig.json メッセージファイルがjsonなので、 tsconfig.jsonに設定を追加…

Nuxtを使ったアプリではBuefyを使っているけど、 BuefyのTooptipが相性が悪く, うまくいかない。。 いろいろ調べたらv-tooktipがよかったので、そのときの備忘録。 v-tooltipの内部では、Popper.jsを使ってるらしい。 なにがうまくいかなかったか BuefyのToo…

Firebase Local Emulator Suiteを使ってみたときの備忘録。 初期設定 # バージョンの確認。CLIがv8.14.0以降じゃないと使えない。 $ firebase --version # Firebase自体の初期設定 $ firebase init # Emulator Suiteの初期設定 $ firebase init emulators コ…

GitHub ActionsでFirebase Hostingへデプロイできるようになったので、 試してみたときの備忘録。 HostingへデプロイするGitHub Actionsはいろいろある 以下の2つがあるっぽい。 GitHub Action for Firebase GitHub Actionでfirebase-toolsが利用できるやつ …

Nuxt+TypeScriptで開発する時は、nuxt-property-decoratorを使ってるけど、 Nuxtv2.12から追加されたfetchやfetchOnServerがうまく動かない。。 その時、調べたときの備忘録。 一部のメソッドは、Component.registerHooksを使って登録する必要があるらしい。…

普段Bulmaを使っているけど、カラーテーマないかなと思ってたら、 Bulmaswatchというのを見つけたのでその備忘録。 インストール まずは、bulmaswatchをインストール $ npm install bulmaswatch cssに組み込む BuefyのCustomizationに従い、SCSSを用意。 そ…

以前、SheetJS(xlsx)でExcelファイルの生成を試してみたけど、 スタイルのコピーや設定ができない課題の解決のため、調べたときの備忘録。 xlsx-populateだと、スタイルの操作もできるっぽい。 インストール $ npm i xlsx-populate xlsx-populateの使い方 外…

Clund Runを試したので、次はGAE。 Cloud Runでの課題 試してみた結果、コールドスタートがよく出るっぽい。。 Cloud Schedulerを使って、定期的にリクエストを送って、 インスタンスが停止しないようにする or 停止してたら起こす、ようにするればよいが気…

開発している積読ハウマッチ、Netlify+Nuxt(SPA)で作ってるけど、 SPAはやっぱり遅い感じが... SSRにできて、リージョンも東京を選べるCloud Runを試してみたときの備忘録 Cloud Runについて Google Cloud Runは、コンテナ化されたアプリをデプロイできるフ…

以前作ったNuxtアプリをPWAでリリースしてみたときの備忘録。 play.google.com コード量自体は少ないけど、いろいろ迷ったのでメモ。 PWA? TWA? プッシュ通知などができるようになるPWA(Progressive Web App)でWebサービスを作ることが増えてきた。 Android…

開発しているWebサービスでユーザ検索機能を作ってみたときの備忘録。 Algoliaつかうとすぐできた(´ω｀) 流れ 大まかな流れはこんな感じ。 Algoliaのアカウント作成 Algoliaのコンソールでインデックスを作成 検索したい初期データを登録する Algoliaのコン…

Nuxt+SCSSで開発をしていると、変数やmixinなど共通的に使うファイルでも、 コンポーネントごとに@import文を書かないといけない。。 めんどくさいなと思っていたら、グローバルで登録ができるのがあったので、 試してみたときの備忘録。 ・nuxt-community/s…

開発しているWebサービスで、ついに広告を導入してみた。 審査が通ったのですぐできるかと思ったら以外に大変だったので、その時の備忘録。 サイトを登録するときにやったこと アカウント登録とか利用規約とか以外はこんな感じ。 robots.txtを配置 ads.txtを…

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>