// 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 });