DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Adding Newsletter to Nuxt 3 apps
Jakub Andrzejewski
Jakub Andrzejewski

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
      },
    ],
  ],
}
Enter fullscreen mode Exit fullscreen mode

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
    }
  }
})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

And the respective result in the browser:

Nuxt Newsletter

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

Top comments (0)

Join the One Year Club

You can earn this badge by being a registered member of the DEV Community for at least one year. Create an account and get started today.