DEV Community

Mattia Zanella
Mattia Zanella

Posted on

Create NuxtJS component for Newsletter subscription with Wordpress.

I was wondering if it's possible to create a component for NuxtJS that allows subscribing to the costumers' newsletter
A component like this one:
Amazing newsletter

So I started to surf the internet and surprisely I found a great WP plugin which can deal with REST API.


  1. Create an account.
  2. Getting Started by installing base plugin.
  3. Paste your GLOBAL LICENSE CODE on your Wordpress » Newsletter » Settings » License Key field.
  4. By default the 2^ step is not enough if you want to add subscribers via REST API. So you have also to install the free Newsletter API addon (find it on Newsletter addons panel in your blog or get it on your account page - 1^ step). This last step is going to add an "API" item under Newsletter inside WP sidebar.

Now we're ready to create our component.
I'm gonna assume that you already have a project with NuxtJS installed.

 Let's code


  <h3 class="has-text-centered">Subscribe to our newsletter</h3>
  <div class="control has-icons-left has-icons-right has-text-centered">
      :contrast="true" />
    <div v-else class="input-container is-relative">
        class="input is-large"
      <span class="add pointer" @click="addSubscription" v-if="isValidEmail"></span>

      <div v-if="" class="result">
        <p> {{ result.message }} </p>
Enter fullscreen mode Exit fullscreen mode

<VZSpinnerPlaceholders /> it's just a simple component that I created to show a funny spinner.
Since I'm using Bulma's module with NuxtJS you can see the component's output here (Loading).


import newsletterManager from "@/mixins/newsletterManager";
mixins: [newsletterManager],
data: () => ({
  email: null,
  isLoading: false,
  result: { show: false, message: null }
computed: {
  isValidEmail() {
    const rule = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
    return Boolean( && rule.test(
  payload() {
    return {
      name: 'Client from nuxt',
methods: {
  async addSubscription() {
    if(!this.isValidEmail) return

    this.isLoading = true
    const subscriptionResponse = await this.MX_NL_addSubscriber(this.payload)
  responseHandler({ response, isAxiosError }) {
    const isString = s => (typeof s === 'string' || s instanceof String)
    let message

    if(isAxiosError) {
      const text = isString( ? :
      message = `${ text } ❌`
    } else {
      message = 'Subscription completed! ✅'

    this.isLoading = false
    this.result = { show: true, message } = null // Flush email
Enter fullscreen mode Exit fullscreen mode

As you can see, I like using mixins to separate the logic like making the POST to add a subscriber.
This is where MX_NL_addSubscriber comes in:

// mixins/newsletterManager.js
import ENVs from "@/constants/environments";

export default {
  methods: {
    async MX_NL_addSubscriber(payload) {
      try {
        const response = await this.$axios.$post(
          `${ ENVs.getDomainPath() }/wp-json/newsletter/v1/subscribe`,

        return response
      } catch(error) { // Let's handle it.
        return error

Enter fullscreen mode Exit fullscreen mode

I'm not using any secret key for the API since the documentation is quite clear:

When called as REST API it can be invoked without the secret key: in this case more strict contraints are applied to the parameters (like for subscriptions coming from a public subscription form).

So, as you can see in the documentation, it's just a simple CURL:

$ curl -X POST -H "Content-Type: application/json" http://<your-site>/wp-json/newsletter/v1/subscribe
-d '{"email":"", "name":"My name", "gender":"f"}'
Enter fullscreen mode Exit fullscreen mode

So this.payload is just an object with those keys.


And this is my wordpress-back office side:
Wp back-office


Once again thank you guys ♥️

Discussion (0)