Когда я начал работать с NUXT.JS, я часто имел проблему, которую я хотел, чтобы отправить электронные письма через контактную форму. Пока есть сторонние службы для этого, я подумал: почему бы не использовать существующую серверную инфраструктуру, которая поставляется с NUXT.JS?
Вот почему я писал nuxt-mail , модуль NUXT.JS, который добавляет /mail/Отправить
Маршрут на сервер и впрыскивает $ mail
Переменная, которая управляет вызовом API.
Применение
Вы начинаете с установки модуля и @ nuxtjs/acios через NPM Установите NUXT-MAIL @ NUXTJS/AXIOS
или пряжа Добавить NUXT-MAIL @ NUXTJS/AXIOS
.
@ nuxtjs/acios
Здесь важно, потому что это позволяет модулю делать остаток.
Тогда вы добавите @ nuxtjs/Axios
и nuxt-mail
к вашему nuxt.config.js
файл. Мы должны передавать настройки SMTP, которые должны использоваться для использования odemailer
. Мы также настраиваем получателей здесь по соображениям безопасности. Таким образом, клиент не может отправлять электронные письма для произвольных получателей с вашего SMTP-сервера. На самом деле вы можете предварительно защищать сообщения здесь, если вы всегда хотите дать им одно и то же название, от адреса или что-то.
export default { modules: [ '@nuxtjs/axios', ['nuxt-mail', { message: { to: 'me@gmail.com', }, smtp: { host: 'smtp.mailtrap.io', port: 2525, auth: { user: 'username', pass: 'password' }, }, }], ], }
Обратите внимание, что вы, вероятно, должны пройти учетные данные или целую конфигурацию через переменные среды (например, через dotenv ). Также обратите внимание, что вы не можете использовать этот модуль для статических сайтов (через NUXT Generate
), потому что промежуточное программное обеспечение сервера не существует.
И там мы идем! Теперь мы можем реализовать сами страницу контактной формы и отправлять электронные письма:
В Раздел Мы в основном звоните
Это. $ mail.send ()
:
Когда вы попали в
Отправить
Кнопка сейчас, вы должны получить электронное письмо в свой почтовый ящик!Несколько сообщений конфигурации
Также можно предоставить несколько конфигураций сообщений, изменив
сообщение
конфиг в массив.export default { modules: [ '@nuxtjs/axios', ['nuxt-mail', { message: [ { name: 'contact', to: 'contact@foo.de' }, { name: 'support', to: 'support@foo.de' }, ], ... }], ], }Затем вы можете ссылаться на конфиг как это:
this.$axios.$post('/mail/send', { config: 'support', from: 'John Doe', subject: 'Incredible', text: 'This is an incredible test message', })Или через индекс (в этом случае вам не нужно
имя
Свойство):this.$axios.$post('/mail/send', { config: 1, // resolves to 'support' from: 'John Doe', subject: 'Incredible', text: 'This is an incredible test message', })Это в основном это, я надеюсь, что это используется для некоторых из вас.
Заключение
Вы можете использовать модуль для легко настроить возможности отправки электронной почты. Если вы планируете построить более широкий SAAS, который отправляет множество электронных писем, ASYNC-решение, которое делает отправку через Cronjob или через серверные крюки, вероятно, является лучшей идеей. Но для первоначального решения он должен работать нормально.
Дайте мне знать, что вы думаете о модуле, и если есть какие-либо открытые вопросы. Также, поскольку это мой первый пост, дайте мне знать, что вы думаете о посте в целом.
Вы можете найти модуль здесь Отказ
Если вам нравится то, что я делаю, следуй за мной на Твиттер или проверить мой Веб-сайт . Также рассмотрим пожертвование в Купить мне кофе , PayPal или Патен . Большое спасибо! ❤ ️
Оригинал: "https://dev.to/seblandwehr/sending-emails-with-nuxt-js-the-easy-way-2n51"