nuxt-mail

Nuxt.jsアプリにメール送信機能を追加します。サーバーのルーティング、注入された変数、およびnodemailerを使用してメールを送信します。
7.4Kダウンロード301スターv7.0.1
dword-designdword-design

nuxt-mail

npm version Linux macOS Windows compatible Build status Coverage status Dependency status Renovate enabled
Open in Gitpod Buy Me a Coffee PayPal Patreon

Nuxt.jsアプリにメール送信機能を追加します。サーバーのルーティング、注入された変数、およびnodemailerを使用してメールを送信します。

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

ℹ️ 情報: このモジュールは、サーバーのルーティングを構築するのが手間だったNuxt 2時代に構築されました。Nuxt 3でははるかに簡単になったため、このモジュールは基本的にシンプルな連絡フォーム用です。より複雑なものを作成したい場合は、nodemailerを直接使用するか、nuxt-nodemailerを使用することをお勧めします。

インストール

# 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: '[email protected]',
      },
      smtp: {
        host: "smtp.example.com",
        port: 587,
      },
    }],
  ],
  // or use the top-level option:
  mail: {
    message: {
      to: '[email protected]',
    },
    smtp: {
      host: "smtp.example.com",
      port: 587,
    },
  },
  // or use runtimeConfig
  runtimeConfig: {
    mail: {
      message: {
        to: '[email protected]',
      },
      smtp: {
        host: "smtp.example.com",
        port: 587,
      },
    },
  },
}

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

このモジュールは$mail変数を注入します。これを使用してメールを送信します。

Nuxt 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>

複数のメッセージ設定

message設定を配列に変更することで、複数のメッセージ設定を提供することも可能です。

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

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

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: '[email protected]',
          pass: '<app-specific password>',
        },
      },
    }],
  ],
}

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

何か足りませんか？プルリクエスト経由であなたのサービスをここに追加してください。

メールエラーのデバッグ

メールが送信されない場合は、ブラウザの開発者ツールを使用してエラーをデバッグできます。500エラーがスローされた場合（コンソール出力を確認してください）、エラーメッセージはネットワークタブに表示されます。Chromeユーザーは、ネットワークタブを開き、「send」リクエストを見つけてください。それを開いて「Response」タブを選択します。そこにエラーメッセージが表示されるはずです。ほとんどの場合、SMTPサーバーとの認証に関連しています。

未解決の質問

「証明書チェーンに自己署名証明書」エラー

上記のエラーがスローされる問題があります。誰かこれに対する解決策を知っていれば、大歓迎です😍。

貢献

何か足りないものがある、または貢献したいですか？お気軽にイシューまたはプルリクエストを提出してください！⚙️

サポート

こんにちは、私はフリーランスのWeb開発者であるセバスチャン・ランドウェーです。Webアプリやオープンソースパッケージの開発が大好きです。私がパッケージを最新の状態に保ち、より役立つツールを構築できるようサポートしたい場合は、こちらで寄付できます。

Buy Me a Coffee  一度限りの寄付を希望する場合。コーヒーはとても美味しいです😊。
PayPal  PayPalがお好きな場合も一度限りの寄付にどうぞ。
Patreon  こちらで定期的にサポートしていただけると、継続的にプロジェクトに取り組めるので大変助かります。

ご支援ありがとうございます！❤️

こちらも参照

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

ライセンス

MITライセンス © Sebastian Landwehr