Adding Newsletter to Nuxt 3 apps
Tags: nuxt, vue, javascript, tutorial
Published: 2022-09-12 13:18:40

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:

```ts
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](https://nuxt-newsletter.netlify.app/getting-started/setup)

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:

```ts
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:

```html
<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. 

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

It can be easily customized to meet your needs best. You can check all customization options [here](https://nuxt-newsletter.netlify.app/components/newsletter-form).

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

```html
<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:

![Nuxt Newsletter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1235cpp105il3ldyi4tj.png)

## 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 :)