Izanagi's site

Nuxt3が正式にリリースされましたね！

みなさんこんにちは！
イザナギです。
さて、やっとNuxt3がやっとリリースされましたね！！
https://nuxt.com/
　
待ってたよ...
長かったな〜
　
rcバージョンから制作を続けて、10ヶ月くらい？にしてやっと正式にリリース。
※ちなみにこちらのブログもNuxt3で作成しております。

とりあえずrcから正式版にアップデートするか。
　

アップデートするとrc14がダウンロードされる？

npx nuxi upgardeを実施したところ、なぜかrc14のバージョンがダウンロードされた？
「npx nuxi clean」や「yarn.lock」を削除して、再ダウンロードしたら治ったし、まあいいか。
　

runtimeConfigの書き方がrcと変わっていた

アップデート対応が完了した後に、早速「yarn generate」を実施したら、なぜかAPIと通信できずに静的ファイルが作成されなかった...
原因調べたところ、「nuxt.config.ts」内の、「runtimeConfig」の書き方が多少変わったようで、APIのURLに使用していた環境変数が「undefind」となっていました。
　
rcバージョンまでは下記書き方だったと思いますが、

    
        privateRuntimeConfig: {
            MICRO_CMS_API_KEY: process.env.MICRO_CMS_API_KEY,
            MICRO_CMS_SERVICE_DOMAIN: process.env.MICRO_CMS_SERVICE_DOMAIN,
        },
        publicRuntimeConfig: {
            FORM_RUN_URL: process.env.FORM_RUN_URL,
            TWITTER_MY_USER_ID: process.env.TWITTER_MY_USER_ID,
            HOMEPAGE_ROOT_URL: process.env.HOMEPAGE_ROOT_URL,
            CONNPASS_NICKNAME: process.env.CONNPASS_NICKNAME,
            GOOGLE_ANALYTICS_ID: process.env.GOOGLE_ANALYTICS_ID,
            RELETE_TITLES_API_URL: process.env.RELETE_TITLES_API_URL,
            SUGGEST_API_URL: process.env.SUGGEST_API_URL,
            SEARCH_API_URL: process.env.SEARCH_API_URL,
            TOPIC_API_URL: process.env.TOPIC_API_URL,
            RELETE_TITLES_API_URL_V2: process.env.RELETE_TITLES_API_URL_V2,
            MY_EVENTS_API_URL: process.env.MY_EVENTS_API_URL,
            HOLIDAY_JP_API_FILENAME: process.env.HOLIDAY_JP_API_FILENAME,
            HOLIDAY_JP_API_URL: process.env.HOLIDAY_JP_API_URL,
            ADSENCE_CLIENT_ID: process.env.ADSENCE_CLIENT_ID
        },

　
しかし、正式リリース版では下記の書き方に変わっていました。

    
        runtimeConfig: {
            MICRO_CMS_API_KEY: process.env.MICRO_CMS_API_KEY,
            MICRO_CMS_SERVICE_DOMAIN: process.env.MICRO_CMS_SERVICE_DOMAIN,
            public: {
                FORM_RUN_URL: process.env.FORM_RUN_URL,
                TWITTER_MY_USER_ID: process.env.TWITTER_MY_USER_ID,
                HOMEPAGE_ROOT_URL: process.env.HOMEPAGE_ROOT_URL,
                CONNPASS_NICKNAME: process.env.CONNPASS_NICKNAME,
                GOOGLE_ANALYTICS_ID: process.env.GOOGLE_ANALYTICS_ID,
                RELETE_TITLES_API_URL: process.env.RELETE_TITLES_API_URL,
                SUGGEST_API_URL: process.env.SUGGEST_API_URL,
                SEARCH_API_URL: process.env.SEARCH_API_URL,
                TOPIC_API_URL: process.env.TOPIC_API_URL,
                RELETE_TITLES_API_URL_V2: process.env.RELETE_TITLES_API_URL_V2,
                MY_EVENTS_API_URL: process.env.MY_EVENTS_API_URL,
                HOLIDAY_JP_API_FILENAME: process.env.HOLIDAY_JP_API_FILENAME,
                HOLIDAY_JP_API_URL: process.env.HOLIDAY_JP_API_URL,
                ADSENCE_CLIENT_ID: process.env.ADSENCE_CLIENT_ID
            }
        },

　
コード的には多少直すだけだったので、さっさと直し、再度「yarn generate」を実施したところ、静的ファイルが作成されました！
　

これで自分のブログも正式リニューアルが完了しました。

まとめ

Nuxt3がリリースされて間もないですが、静的ファイルを作成するスピードが体感nuxt2に比べて早くなった気がしています。
これからもアップデートや、nuxt-communityのコンテンツも徐々にnuxt3に対応してくると思うので、対応次第、こちらのブログでも利用していこうかな？

2024 - Izanagi's Site