Nuxt.js + EmailJS でコンタクトフォームを実装してVercelにデプロイしたら404エラーが発生したこと

初歩的な事とは承知の上で自分の備忘録として記事にします！

Nuxt.js、EmailJSでコンタクトフォームを実装し、Vercelにデプロイした際に404エラーが出てメールが送信できませんでした。

原因

Nuxt.jsのpagesフォルダ内でEmailJSのアカウント情報を設定していた点でした。

index.vue

const emailjs = {
    userId: process.env.EMAILJS_USER_ID,
    serviceId: process.env.EMAILJS_SERVICE_ID,
    templateId: process.env.EMAILJS_TEMPLATE_ID
};

対処法

以下のようにruntimeConfigを使用して、アカウント情報を取得することで解決できました。

nuxt.config.ts

runtimeConfig: {
    public: {
        userId: process.env.EMAILJS_USERID,
        serviceId: process.env.EMAILJS_SERVICE_ID,
        templateId: process.env.EMAILJS_TEMPLATE_ID,
    }
},

index.vue

const config = useRuntimeConfig();
const emailjsConfig = {
    userId: config.public.userId,
    serviceId: config.public.serviceId,
    templateId: config.public.templateId
};

runtimeConfigを適切に設定することで、Vercelデプロイ時に環境変数が正しく読み込まれ、404エラーが解消され、メールの送信が可能となりました。
認識が間違っている箇所、足りていない箇所があればご教授お願いします！