タグ
#Nuxt.js
Nuxt.jsに関する記事を公開しています。
Nuxt3でGoogleアドセンス広告を表示する
Nuxt3で構築されたサイトにGoogleアドセンスの広告を表示する具体的な手順をご紹介します。プラグインは使いません。
Nuxt3で外部画像を静的生成する — NuxtImgとNuxtPictureの使い分け
Nuxt3で内部画像と外部画像を静的生成し、各デバイス毎に画像サイズを最適化するには、公式モジュールのNuxt Imageを使います。
Nuxt ContentでコンポーネントにクラスやIDを付ける
Nuxt Contentでスタイリングする際、直接要素にCSSを当てるのが簡単ですが、クラスやIDなど各種属性を付けることもできます。Tailwind CSSなどのUIライブラリを使う場合に便利な方法です。
Nuxt2から3へ移行した感想。なぜ人々はNuxtを選ぶのか
数年前にNuxt2で構築した当サイトをNuxt3で再構築しました。便利ツールのはずのNuxt Bridgeがまったく使い物にならず1から始めることになり、安定版リリースは延期に延期を重ね、「なぜ私はNuxt3を使わなければいけないのか？」と自問自答しながらのフルリニューアルでしたが、色々と経験できたのでアウトプットしたいと思います。
Nuxt3の動的ルーティングで404エラーを表示する
Nuxt3では、存在しないページにアクセスされた時に自動的に404ページを表示してくれますが、動的ルーティング（例：/pages/[postId].vue）の場合は、存在しないページがあったとしても404エラーになりません。
Nuxt3で404ページをカスタマイズする
Nuxt3で404エラーのページをカスタマイズするには、app.vueと同じ階層（ルートフォルダ）にerror.vueを作成します。エラーメッセージはuseError()関数で取得できるため、それを元に思い通りのページを作ることができます。
Nuxt3で画像の静的生成機能を自前で実装する（Static Images）
Nuxt3には画像変換モジュールとしてNuxt/Imageがありますが、長らく静的画像の生成機能がサポートされていないため、自前で実装してみました。
Cloudflare PagesでNuxt3サイトのホスティングに失敗する
おそらく一時的なエラーかと思いますが、執筆時点、Cloudflare PagesでBuild output directory（出力先のフォルダ）の値にdistを指定してNuxt3の静的ビルド（SSG）をすると失敗します。
Nuxt3でサイトマップを生成する
Nuxt3でサイトマップが生成できるモジュール、Simple-Sitemapが公開されました。難しい設定不要で、動的ルーティング含め、ちゃんとしたsitemap.xmlが.output/publicフォルダ内に生成されます。
Nuxt3のApolloモジュールでBasic認証を使うには
Nuxt ApolloでBasic認証を使うにはPluginsフォルダ内にauth.tsファイルを作り、以下のコードを記述します。
Nuxt3で静的サイトを正常にプレビューするには
Nuxt3で静的サイトを構築し、いざ確認！と、nuxi prevewコマンドを叩くと、開発時（nuxi devコマンド実行時）には問題のなかったサイトが、何故か正常に表示されない現象に悩まされていました。
Nuxt.jsで環境変数を使うには
Nuxt.jsで環境変数を使うには、ルートフォルダに.envファイルを作成します。外部モジュールのインストールやnuxt.config.jsへの記述は不要でデフォルトで利用できるようになっています。process.env.変数名で、どのファイルからも参照できます。
Gatsby.jsとNext.jsとNuxt.jsを比較する
ReactフレームワークのGatsby.jsとNext.js、VueフレームワークのNuxt.js、これらの主要なJSフレームワークで静的サイトを構築して得た気づきをご紹介します。