Create NuxtJS component for Newsletter subscription with Wordpress.

#nuxt #vue #wordpress #rest

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:

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

Requirements

Create an account.
Getting Started by installing base plugin.
Paste your GLOBAL LICENSE CODE on your Wordpress » Newsletter » Settings » License Key field.
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

Template:

<div>
  <h3 class="has-text-centered">Subscribe to our newsletter</h3>
  <div class="control has-icons-left has-icons-right has-text-centered">
    <VZSpinnerPlaceholders
      class="justify-center"
      v-if="isLoading"
      :contrast="true" />
    <div v-else class="input-container is-relative">
      <input
        v-model.trim="email"
        class="input is-large"
        type="email"
        placeholder="Email">
      <span class="add pointer" @click="addSubscription" v-if="isValidEmail"></span>

      <div v-if="result.show" class="result">
        <p> {{ result.message }} </p>
      </div>
    </div>
  </div>
</div>

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

Logic:

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(this.email && rule.test(this.email))
  },
  payload() {
    return {
      email: this.email,
      name: 'Client from nuxt',
      gender:'--'
    }
  }
},
methods: {
  async addSubscription() {
    if(!this.isValidEmail) return

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

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

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

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`,
          payload
        )

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

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

Subscribe
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":"test@example.com", "name":"My name", "gender":"f"}'