Adding Newsletter to Nuxt 3 apps

Adding new subscribers is a functionality that can be placed in any application types. From simple portfolio pages to complex e-commerce applications, adding new users to your newsletter can provide a lot of value. I always thought about it as something really difficult to implement while in reality it is rather easy.

In this article, I will show you how easily you can do so by using my nuxt module that integrates easily with popular newsletter providers.

Code

First of all, in your Nuxt 3 application, let's add a new nuxt module nuxt-newsletter

yarn add nuxt-newsletter

This will install the module so that we can use it in our project. Then, let's register the module in our nuxt.config.ts file in modules array:

export default {
  modules: [
    [
      "nuxt-newsletter",
      {
        // Options
      },
    ],
  ],
}

nuxt-newsletter integrates easily with Mailchimp, Buttondown, and Revue. For more information about it, please check out documentation here

Let's say that in our case, we would like to use the Revue integration. For that, we will fill up the configuration like following:

export default defineNuxtConfig({
  modules: [
    'nuxt-newsletter'
  ],
  newsletter: {
    revue: {
      apiKey: process.env.REVUE_API_KEY,
      component: true // optional
    }
  }
})

And that's it! The module is now registered and can be used later. Right now, you can use the module functionality by choosing a component or a composable.

If you choose a composable approach, it will only provide a functionality to add a user to the subscribers list (no UI at all).

It can be done like the following:

<script setup>
const result = await useNewsletterSubscribe(email.value)

console.log(result) // Email ${email} added to subscribers
</script>

If you choose a component approach, make sure to set the configuration option to true. After that, you will be able to use the NewsletterForm component.

<template>
  <div>
    <newsletter-form />
  </div>
</template>

It can be easily customized to meet your needs best. You can check all customization options here.

Below, you can see available approaches to use NewsletterForm component:

<div>
    <div>
      <h1>Default NewsletterForm.vue component</h1>
      <newsletter-form/>
    </div>
    <div>
      <h1>Styled NewsletterForm.vue component</h1>
      <newsletter-form :theme="{ container: 'newsletter-form', button: 'newsletter-form__button', header: 'newsletter-form__header', input: 'newsletter-form__input' }" />
    </div>
    <div>
      <h1>Customized NewsletterForm.vue component</h1>
      <newsletter-form
        @subscribed="log"
        headerText="Cool Newsletter"
        buttonText="Join in!"
        inputPlaceholder="Your email"
      >
        <template #top>
          <img src="https://github.com/nuxt/framework/raw/main/.github/logo.svg" width="200">
        </template>
        <template #description>
          <p>My Awesome newsletter description</p>
        </template>
        <template #bottom>
          <div>
            <input type="checkbox" id="check">
            <label for="check">Check</label>
          </div>
        </template>
      </newsletter-form>
    </div>
  </div>

And the respective result in the browser:

Summary

Nicely done! You have just added a newsletter integration to your Nuxt 3 application. From now on, you can play around with it and recommend some new improvements as I am trying to make the module the best possible :)