Nuxt.js を使った簡単な方法でメールを送信する

Nuxt.js を使い始めたとき、頻繁に問題が発生したので、連絡フォームからメールを送信しました.それを行うためのサードパーティのサービスがありますが、Nuxt.js に付属する既存のサーバー インフラストラクチャを使用しないのはなぜでしょうか?
/mail/send ルートをサーバーに追加し、API 呼び出しをラップする $mail 変数を挿入する Nuxt.js モジュールである nuxt-mail を作成したのはそのためです.

使用法

モジュールと @nuxtjs/axios を npm install nuxt-mail @nuxtjs/axios または yarn add nuxt-mail @nuxtjs/axios 経由でインストールすることから始めます.
@nuxtjs/axios は、モジュールが REST 呼び出しを実行できるようにするため、ここで重要です.

次に、@nuxtjs/axios と nuxt-mail を nuxt.config.js ファイルに追加します. nodemailer によって内部的に使用される SMPT 設定を渡す必要があります.セキュリティ上の理由から、ここで受信者も構成します.これにより、クライアントは SMTP サーバーから任意の受信者に電子メールを送信できなくなります.アドレスなどから常に同じタイトルを付けたい場合に備えて、実際にここでメッセージを事前設定できます.

export default {
  modules: [
    '@nuxtjs/axios',
    ['nuxt-mail', {
      message: {
        to: '[email protected]',
      },
      smtp: {
        host: 'smtp.mailtrap.io',
        port: 2525,
        auth: {
          user: 'username',
          pass: 'password'
        },
      },
    }],
  ],
}

環境変数を介して(たとえば、 dotenv を介して)資格情報または構成全体を渡す必要があることに注意してください.また、サーバー ミドルウェアが存在しないため、このモジュールを ( nuxt generate 経由で) 静的サイトに使用できないことにも注意してください.

では、行きましょう!これで、コンタクトフォームページを実装してメールを送信できます.

<template>
  <form>
    <label for="email">Your email address:</label>
    <input id="email" type="email" v-model="email" />
    <label for="message">Message:</label>
    <textarea id="message" v-model="message" />
    <button type="submit" @click.prevent="send">
      Send email
    </button>
  </form>
</template>

<script> セクションでは、基本的に this.$mail.send() を呼び出します.

<script>
export default {
  data: () => ({
    email: '',
    message: '',
  }),
  methods: {
    send() {
      this.$mail.send({
        from: this.email,
        subject: 'Contact form message',
        text: this.message,
      })
    }
  }
}
</script>

ここで Send ボタンを押すと、受信箱にメールが届くはずです!

複数のメッセージ構成

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

export default {
  modules: [
    '@nuxtjs/axios',
    ['nuxt-mail', {
      message: [
        { name: 'contact', to: '[email protected]' },
        { name: 'support', to: '[email protected]' },
      ],
      ...
    }],
  ],
}

次に、次のように構成を参照できます.

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

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

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

基本的には以上です.

結論

このモジュールを使用して、電子メール送信機能を簡単にセットアップできます.大量のメールを送信する大規模な SaaS を構築する予定がある場合は、cron ジョブまたはサーバー側のフックを介して送信を行う非同期ソリューションを使用することをお勧めします.しかし、最初の解決策としては、うまくいくはずです.


モジュールについてどう思うか、未解決の質問があれば教えてください.また、これは私の最初の投稿であるため、投稿全体についてどう思うか教えてください.

モジュール here を見つけることができます.

私がやっていることが気に入ったら、フォローするか、私の website をチェックしてください. Buy Me a Coffee 、 PayPal 、または Patreon での寄付も検討してください.どうもありがとう! ❤️