vue-server-renderer: directive not applied to imported component

What problem does this feature solve?

Currently, SSR directives are not applied to used (sub-)components but only to HTML-tags and elements.

Reproduction

// Step 1: Create a Vue instance
const Vue = require("vue");

const Test = {
  template: `<div>This should be red</div>`
}

const app = new Vue({
  template: `
  <div>
    <Test v-make-red/>
    <div v-make-red>This is red</div>
  </div>
  `,
  components: {
    Test
  }
});

const makeRed = (node, dir) => {
  const style = node.data.style || (node.data.style = {});
  if (Array.isArray(style)) {
    style.push({ backgroundColor: "red" });
  } else {
    style.backgroundColor = "red";
  }
};

// Step 2: Create a renderer
const renderer = require("vue-server-renderer").createRenderer({
  directives: {
    makeRed
  }
});

// Step 3: Render the Vue instance to HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err;
  console.log(html);
  // <div data-server-rendered="true"><div>This should be red</div> <div style="background-color:red;">This is red</div></div>
  // But should include red background-color style for the first div as well
});

Related: https://github.com/nuxt/nuxt.js/issues/6575

[dagadbm]

hey guys. i use vue on a daily basis and i would like to contribute. I see here this is a contribution welcome label. can someone help me so i can start to fix this if possible?

(i already forked installed and can run test and build.)

[Dryymoon]

Hi, any update on this ? still not working with nuxt 2.14

+1 Still not working, nuxt@2.14.6 vue@2.6.12 vue-server-renderer@2.6.12