feat(Directives): Add directive SSR fallback

[zickat]

The goal is to match the vue ssr doc and allow the use of directives on server side https://ssr.vuejs.org/api/#directives.
The usage will look like the nuxt one. https://fr.nuxtjs.org/api/configuration-render/

Usage

If you have a directive which adds red color to a div

export default {
    inserted(el) {
        el.style.color = 'red';
    }
}

Vue.directive('red', red);

<div v-red> My red text </div>

This directive can't work with SSR. So we need a fallback.

SSR directive of red : red-server.js

/**
* @param node the VNode where we applied the directive
* @param dir properties of the directive
*/
module.exports = function(node, dir) {
  // get the current style of the node. If it doesn't have one, we create it
  const style = node.data.style || (node.data.style = {})
  // the style can be an array or an object
    if (Array.isArray(style)) {
     //if it's an array, we add a new style in it
      style.push({ color: 'red' })
    } else {
     // else we just set the color to red
      style.color = 'red'
    }
};

Finally, register the directive inside vue.config.js

const red = require('red-server');

module.exports = {
  pluginOptions: {
    ssr: {
      directives: {
        red,
      },
    },
  },
};