category: フロントエンド（Vue/Nuxt）
53 posts
Nuxt 3 の nitro preview で fetch が動かない時の原因と解決策
Nuxt 3 では、アプリケーションをビルドしたあとに npm run build && npm run preview（もしくは nuxt preview）で “preview” 環境を立ち上げ、動作を […]
2025-11-02
Vue 3 で「Avoid mutating a prop directly」警告が出る原因と正しい対応
Vue 3 の開発中に、次のような警告を見たことはありませんか？ これは、props を直接書き換えたときに Vue が出す警告です。一見「値を更新したいだけ」でも、Vue のリアクティブシステム上は明確な設計違反になり […]
2025-11-01
スポンサーリンク
Vue 3 の provide/inject が reactive で更新されない問題の解決法
Vue 3 の provide / inject は、親コンポーネントから子コンポーネントへ値を渡すための仕組みです。コンポーネントツリーをまたいで状態を共有できるため、グローバルストアを使うほどではない軽量なデータ共有 […]
2025-10-10
Nuxt 3 で middleware が初回ロードで動かない原因と修正方法
Nuxt 3 でアプリケーションを構築していると、ルートごとにアクセス制御や処理を挟むために middleware を利用することが多くあります。しかし「初回ロード時に middleware が走らない」「SSR では効 […]
2025-10-06
Nuxt 3 で runtimeConfig を useRuntimeConfig() で使うと @click が動かなくなるケースと原因
Nuxt 3 の useRuntimeConfig() をコンポーネント内で使うと、突如として @click やその他のイベントが発火しなくなるという報告が時々上がります。単純に “useRuntimeConfig を呼 […]
2025-09-28
.env ファイルが反映されない？Nuxt の環境変数ロードタイミングと prefix 問題
Nuxt 3 プロジェクトで .env ファイルを作成して環境変数を設定したのに、開発サーバーや本番デプロイで値が反映されず、undefined になってしまった経験はありませんか？特に process.env.MY_K […]
2025-09-27
Nuxt 3 + Cloudflare Pages で whatwg-url パッケージ等のビルドエラー
Nuxt 3 アプリを Cloudflare Pages にデプロイしようとしたとき、以下のようなビルドエラーに遭遇することがあります。 このエラーは whatwg-url や tr46, webidl-conversi […]
2025-09-26
Nuxt + Docker 環境で runtimeConfig の public env がクライアント遷移後に消える問題とその対処
Docker やコンテナ環境で Nuxt アプリをデプロイすると、初回表示では正常に runtimeConfig.public の値が取得できるのに、クライアントサイドのページ遷移後に値が消える／undefined にな […]
2025-09-25
Nuxt 3 で runtimeConfig が undefined に？環境変数・バージョン依存の読み込み失敗の対処法
Nuxt 3 を使った開発で、useRuntimeConfig() を呼び出したら undefined が返ってきてしまった……という現象に遭遇することがあります。とくに 3.13.0 などの一部バージョンや、Docke […]
2025-09-25
Nuxt 3で「No match found for location」警告が出た原因と解決策
Nuxt 3 の開発中にコンソールに次のような警告が表示されることがあります。 この警告は、Vue Router が指定されたパスに一致するルートを見つけられなかった場合に発生します。 ローカル開発時だけでなく、ビルド後 […]
2025-09-13