「Jamstack」アーキテクチャによるWeb開発【Nuxt.js×MicroCMS×Firebase】
新規開発で「Jamstack」アーキテクチャを取り入れて開発したので、その過程やメリットなどについてまとめておきます。 Jamstack構成にあたり以下のサービスを活用しています。 静的サイトジェネレータ：Nuxt.js …
「Nuxt.js」の記事一覧
【Nuxt.js】Firebase Resize Imagesでリサイズした画像を出し分ける方法
Firebase Resize Images拡張機能をインストールし、Nuxt.jsでリサイズした画像を出し分けて表示する方法を紹介します。 Firebase Resize Imagesのインストール・構成 Fireba …
【Nuxt.js】Firebase Hostingで404ページに遷移されない対処法
Nuxt.js + Firebase Hostingでgenerateによる静的ファイル生成時に404ページに遷移されない問題の対処法をメモしておきます。 Nuxt.jsでgenerateした静的ファイル以外のページにア …
【Nuxt.js】buildとgenerateのパフォーマンスを向上させる方法
nuxt buildとnuxt generateのパフォーマンス向上させる方法を紹介します。 nuxt buildのパフォーマンス向上 「HardSourceWebpackPlugin」の活用 HardSourceWeb …
【Nuxt.js】generateで動的ルーティング生成とpayloadによる高速化
Nuxt.jsのgenerateコマンドで動的ルーティングページを生成する方法とpayload による動的ルーティング生成の高速化について紹介します。 また、cross-envを使ったAPIのURLを環境ごとに変える方法 …
【Nuxt.js】vee-validateでバリデーションを実装する方法
vee-validateというライブラリでNuxt.jsにバリデーションを実装する方法をメモしておきます。 バージョン2系からバージョン3系への仕様変更 2019/8のバージョン3系への更新によって大規模な仕様変更が生じ …
【Nuxt.js】Firestore Storageに画像アップロード・削除する方法
Nuxt.jsでFirestore Storageに画像アップロード・バリデーション・削除する方法をメモしておきます。 前提条件 Nuxt.jsとFirestore Storageの連携をします。firebase.jsに …
【Nuxt.js】vue-infinite-loadingで検索結果を無限スクロールする方法
Nuxt.jsで「vue-infinite-loading」というプラグインを使って、検索結果を無限スクロールする方法を紹介します。 事前準備 まずは「vue-infinite-loading」プラグインをインストールし …
