Share functions between Vue and Node

Vue and Node make a powerful and versatile team, but aside from the API — via Express for me — Vue doesn't talk to Node, or vice versa, and I had to fix that.

So there I was, building the front end, writing the code for a utilities mixin to store functions to handle common string and number operations. But then I realized that I had also written much the same code in a controller for Node.

What if I could use the same functions in Node and Vue?

So, first I created a file in Node that would contain the core functions I'd be using in the mixin in Vue:

// "utilities.js" in Node.

let utilities = {}

utilities.stripTags = (note, hellip = false) => {
  let removeHTML = note.replace(/(<([^>]+)>)/ig, "")
  let removeHTMLEntities = removeHTML.replace(/&#{0,1}[a-z0-9]+;/ig, "")
  let removeLineBreaks = removeHTMLEntities.replace(/\r?\n|\r/g, " ")
  let removeNonbreakingSpaces = removeLineBreaks.replace(/&nbsp;/ig, " ")
  let removeEmojies = removeNonbreakingSpaces.replace(/[\u1000-\uFFFF]+/g, " ")
  let string = removeEmojies
  return (hellip) ? string.concat('&hellip;') : string
}

module.exports = utilities

… then, I returned to the mixin:

// "utilities.js" in Vue.

'use strict'

// Core modules.
import CoreUtilities from 'path_to/utilities'

export const Utilities = {
  data () {
    return {
      // Reactive variables...
    }
  },
  methods: {
    stripTags (note, hellip = false) {
      // Utilizing a method in core utilities.
      return CoreUtilities.stripTags(note, hellip)
    }
  }
}

Now I have one definitive source of functions that both Vue and Node are able to access.

If anyone knows a more efficient method of replacing HTML, please share!

Image by Dyanap from Pixabay

Blog

Share functions between Vue and Node

Wayne Smallman

Join Our Newsletter. No Spam, Only the good stuff.

Related