nuxt-mail

Nuxt.jsアプリにメール送信機能を追加します。サーバールートと注入可能な変数を追加し、nodemailerを使用してメールを送信します。

このモジュールはサーバールートを作成するため、静的サイト（nuxt generate経由）では機能しません。

インストール

# npm
$ npx nuxi module add nuxt-mail

# Yarn
$ yarn nuxi module add nuxt-mail

構成

nuxt.config.jsのmodules配列にモジュールを追加します。buildModulesではなくmodulesに追加することに注意してください。そうしないと、サーバールートは生成されません。

// nuxt.config.js
export default {
  modules: [
    ['nuxt-mail', {
      message: {
        to: 'foo@bar.de',
      },
      smtp: {
        host: "smtp.example.com",
        port: 587,
      },
    }],
  ],
  // or use the top-level option:
  mail: {
    message: {
      to: 'foo@bar.de',
    },
    smtp: {
      host: "smtp.example.com",
      port: 587,
    },
  },
  // or use runtimeConfig
  runtimeConfig: {
    mail: {
      message: {
        to: 'foo@bar.de',
      },
      smtp: {
        host: "smtp.example.com",
        port: 587,
      },
    },
  },
}

smtpオプションは必須であり、直接nodemailerに渡されます。利用可能なオプションについては、そのドキュメントを参照してください。また、message設定を介して、少なくともto、cc、またはbccを渡す必要があります。これにはセキュリティ上の理由があり、クライアントはSMTPサーバーから任意の受信者にメールを送信できません。message設定を使用してメッセージを事前に構成できます。そのため、常に同じ件名または送信元アドレスでメールを送信したい場合は、ここで構成できます。

このモジュールは、電子メールの送信に使用される$mail変数を注入します。

ヌクスト3

構成可能経由

<script setup>
const mail = useMail()

mail.send({
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
})
</script>

注入可能な変数経由

<script setup>
const { $mail } = useNuxtApp()

$mail.send({
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
})
</script>

オプションAPI経由

<script>
export default {
  methods: {
    sendEmail() {
      this.$mail.send({
        from: 'John Doe',
        subject: 'Incredible',
        text: 'This is an incredible test message',
      })
    },
  },
}
</script>

ヌクスト2

ヌクスト2の場合は、@nuxtjs/axiosをインストールして、nuxt-mailの前にモジュールリストに追加する必要があります。

// nuxt.config.js
export default {
  modules: [
    [
      '@nuxtjs/axios',
      ['nuxt-mail', { /* ... */ }],
    }],
  ],
}

その後、このように注入された変数を使用できます。

<script>
export default {
  methods: {
    sendEmail() {
      this.$mail.send({
        from: 'John Doe',
        subject: 'Incredible',
        text: 'This is an incredible test message',
      })
    },
  },
}
</script>

本番環境の使用に関する注意事項

本番環境でnuxt-mailを使用し、ドメインの背後にローカルホストを隠すリバースプロキシを構成した場合、@nuxt/axiosに使用している基本URLを通知する必要があります。そうしないと、nuxt-mailは送信ルートを見つけられません。その方法については、@nuxt/axiosオプションを参照してください。最も簡単なオプションは、API_URL環境変数を設定するか、nuxt.config.jsで何かを設定することです。

// nuxt.config.js
export default {
  axios: {
    baseURL: process.env.BASE_URL,
  },
}

複数のメッセージ構成

message構成を配列に変更することで、複数のメッセージ構成を提供することもできます。

// nuxt.config.js
export default {
  modules: [
    ['nuxt-mail', {
      message: [
        { name: 'contact', to: 'contact@foo.de' },
        { name: 'support', to: 'support@foo.de' },
      ],
      ...
    }],
  ],
}

その後、このように構成を参照できます。

mail.send({
  config: 'support',
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
})

またはインデックス経由（この場合、nameプロパティは必要ありません）

mail.send({
  config: 1, // Resolves to 'support'
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
})

また、このモジュールはサーバールートを作成するため、静的サイト（nuxt generate経由）では機能しません。

一般的なメールサービスの設定

Gmail

SMTPサーバーにログインするには、アプリ固有のパスワードを設定する必要があります。次に、次の構成をnuxt-mail構成に追加します。Gmailの構成には複数の方法があるようなので、オプションを試してみるのが最善です。

// nuxt.config.js
export default {
  modules: [
    ['nuxt-mail', {
      smtp: {
        service: 'gmail',
        auth: {
          user: 'foo@gmail.com',
          pass: '<app-specific password>',
        },
      },
    }],
  ],
}

// nuxt.config.js
export default {
  modules: [
    ['nuxt-mail', {
      smtp: {
        host: "smtp.gmail.com",
        port: 587,
        auth: {
          user: 'foo@gmail.com',
          pass: '<app-specific password>',
        },
      },
    }],
  ],
}

足りないものがありますか？このサービスをプルリクエストを介して追加してください。

サポートありがとうございます！❤️

こちらもご覧ください

nuxt-route-meta: ビルド時にNuxtページデータをルートメタに追加します。
nuxt-modernizr: Nuxt.jsアプリにModernizrビルドを追加します。
nuxt-mermaid-string: ダイアグラム文字列を提供することにより、Nuxt.jsアプリにマーメイドダイアグラムを埋め込みます。
nuxt-content-git: git履歴に基づいてcreatedAtおよびupdatedAtの日付を置き換えるか追加する、@nuxt/contentの追加モジュール。
nuxt-babel-runtime: babelをサポートするNuxt CLI。@nuxt/typescript-runtimeに触発されています。