vue-mailup

MailUp plugin for VueJS -> official docs

Usage

Vue entry point

$ npm install vue-mailup

import Vue from 'vue';
import VueMailUp from 'vue-mailup';

const options = {
  list: 1, // list ID
  listGuid: 'xxxx-xxxx-xxxx', // list guid
  key: 'k2z5.s01.it', // your console URL
  confirm: 1 // confirmation email
};

Vue.use(VueMailUp, options)

Vue Component - Subscribe

export default {
  ...
  methods: {
    subscribeAction (formData) {
      // first gather your basic data (if they're static for the whole app)
      const baseNewsletterParams = this.$mailUp.NewsletterParameters

      // gather necessary data
      const formData = {
        email: '[email protected]',
        csvFldNames: ['campo1', 'campo2'].join(';'),
        csvFldValues: ['field1Value', 'field2Value'].join(';')
      }

      // merge data
      const subscribeData = Object.assign({}, baseNewsletterParams, formData)

      // send data
      this.$mailUp.subscribe(subscribeData)
        .then(reply => { /* do things here */ })
        .catch(reply => { /* error occurred here */ })

      /**
       * this will call:
       * http://k2z5.s01.it/frontend/xmlsubscribe.aspx
       * ?List=1
       * &ListGuid=xxxx-xxxx-xxxx
       * &Confirm=1
       * &retCode=1
       * &[email protected]
       * &csvFldNames=campo1;campo2
       * &csvFldValues=field1Value;field2Value
       */
    }
  }
  ...
}

Vue Component - CheckSubscriber

export default {
  ...
  methods: {
    checkSubscribeAction (formData) {
      // first gather your basic data (if they're static for the whole app)
      const baseNewsletterParams = this.$mailUp.NewsletterParameters

      // gather necessary data
      const formData = {
        email: '[email protected]'
      }

      // merge data
      const subscribeData = Object.assign({}, baseNewsletterParams, formData)

      // send data
      this.$mailUp.checkSubscriber(subscribeData)
        .then(reply => { /* do things here */ })
        .catch(reply => { /* error occurred here */ })

      /**
       * this will call:
       * http://k2z5.s01.it/frontend/Xmlchksubscriber.aspx
       * ?List=1
       * &ListGuid=xxxx-xxxx-xxxx
       * &Confirm=1
       * &retCode=1
       * &[email protected]
       */
    }
  }
  ...
}

Vue Component - UpdateSubscriber

export default {
  ...
  methods: {
    updateSubscribeAction (formData) {
      // first gather your basic data (if they're static for the whole app)
      const baseNewsletterParams = this.$mailUp.NewsletterParameters

      // gather necessary data
      const formData = {
        email: '[email protected]',
        csvFldNames: ['campo1', 'campo2'].join(';'),
        csvFldValues: ['field1Value', 'field2Value'].join(';')
      }

      // merge data
      const subscribeData = Object.assign({}, baseNewsletterParams, formData)

      // send data
      this.$mailUp.updateSubscriber(subscribeData)
        .then(reply => { /* do things here */ })
        .catch(reply => { /* error occurred here */ })

      /**
       * this will call:
       * http://k2z5.s01.it/frontend/xmlUpdSubscriber.aspx
       * ?List=1
       * &ListGuid=xxxx-xxxx-xxxx
       * &Confirm=1
       * &retCode=1
       * &[email protected]
       * &csvFldNames=campo1;campo2
       * &csvFldValues=field1Value;field2Value
       */
    }
  }
  ...
}

Vue Component - Unsubscribe

export default {
  ...
  methods: {
    unsubscribeAction (formData) {
      // first gather your basic data (if they're static for the whole app)
      const baseNewsletterParams = this.$mailUp.NewsletterParameters

      // gather necessary data
      const formData = {
        email: '[email protected]'
      }

      // merge data
      const unsubscribeData = Object.assign({}, baseNewsletterParams, formData)

      // send data
      this.$mailUp.unsubscribe(unsubscribeData)
        .then(reply => { /* do things here */ })
        .catch(reply => { /* error occurred here */ })

      /**
       * this will call:
       * http://k2z5.s01.it/frontend/Xmlunsubscribe.aspx
       * ?List=1
       * &ListGuid=xxxx-xxxx-xxxx
       * &Confirm=1
       * &retCode=1
       * &[email protected]
       */
    }
  }
  ...
}

Options

Options are mandatory

const options = {
  list: 1, // list ID
  listGuid: 'xxxx-xxxx-xxxx', // list guid
  key: 'k2z5.s01.it', // your console URL
  confirm: 1 // confirmation email
};

Methods

• subscribe (data, key): subscribes to a list
• checkSubscriber (data, key): checks if a user is subscribed
• updateSubscriber (data, key): update subscriber status
• unsubscribe (data, key): unsubscribe a user

Parameters

• data [object]: required, key => value, as sent to mailup
• key [string]: optional, if not set the "options" key will be used

TODO

• Webpack bundle
• Test