Nuxt Listmonk

Listmonk module for Nuxt.js

• Release Notes
• Documentation

Features

• Nuxt 3.21 and Nuxt 4 ready
• Typescript support

Quick Setup

1. Add nuxt-listmonk dependency to your project:

npx nuxi module add nuxt-listmonk

2. Add nuxt-listmonk to the modules section of nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['nuxt-listmonk'],
  listmonk: {
    host: process.env.NUXT_LISTMONK_HOST,
    listId: process.env.NUXT_LISTMONK_LIST_ID,
    apiUsername: process.env.NUXT_LISTMONK_API_USERNAME,
    apiToken: process.env.NUXT_LISTMONK_API_TOKEN,
    existingSubscriberMode: 'preserve',
  },
});

Use the numeric Listmonk API list ID (not the public list UUID) and credentials from a dedicated API user. The credentials stay in Nuxt's private server runtime configuration.

Subscriber attributes can be sent as a typed JSON object:

await useSubscribe({
  email: 'person@example.com',
  attribs: {
    locale: 'pt-BR',
    interests: ['security', 'payments'],
  },
})

existingSubscriberMode defaults to preserve, which adds the configured list without changing an existing subscriber profile. Set it to merge to also merge submitted attributes and update a submitted name. Merge mode requires Listmonk 6.1 or newer.

That's it! You can now use Listmonk in your Nuxt app ✨

Contribution

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Build and inspect the package
npm run prepack
npm pack --dry-run

Support

Hi, I am Thomerson Roncally, a Fullstack Developer that love to build things to help other developers. If you like my work and want to support me, you can donate here: