Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
TheAlexLichter opened this issue Oct 20, 2019 · 5 comments · Fixed by #12661
Closed

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

TheAlexLichter opened this issue Oct 20, 2019 · 5 comments · Fixed by #12661

Comments

@TheAlexLichter
Copy link
Contributor

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: nuxt/nuxt#6575

@dagadbm
Copy link

dagadbm commented Jan 22, 2020

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.)

trecenti added a commit to trecenti/vue that referenced this issue Apr 6, 2020
Component directives are not being render during SSR, this fixes it by passing the directives data
to its first imediate child.

fix vuejs#10733
@Neodark7
Copy link

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

@Dryymoon
Copy link

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

@tylerforesthauser
Copy link

I'm rather confused as to why this fix hasn't been implemented as it appears to completely resolve this issue...

@buffalom
Copy link

buffalom commented Jan 6, 2022

Any update on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment