рд╡рд░реНрддрдорд╛рди рдореЗрдВ, SSR рдирд┐рд░реНрджреЗрд╢реЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ (рдЙрдк) рдШрдЯрдХреЛрдВ рдкрд░ рд▓рд╛рдЧреВ рдирд╣реАрдВ рд╣реЛрддрд╛ рд╣реИ, рдХреЗрд╡рд▓ HTML- рдЯреИрдЧ рдФрд░ рддрддреНрд╡реЛрдВ рдХреЗ рд▓рд┐рдП рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред
// 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
});
рд╕рдВрдмрдВрдзрд┐рдд: https://github.com/nuxt/nuxt.js/issues/6575
рд╣реЗ рд▓реЛрдЧреЛрдВред рдореИрдВ рджреИрдирд┐рдХ рдЖрдзрд╛рд░ рдкрд░ рдкреНрд░рддрд┐рдЬреНрдЮрд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВ рдФрд░ рдореИрдВ рдпреЛрдЧрджрд╛рди рджреЗрдирд╛ рдЪрд╛рд╣реВрдВрдЧрд╛ред рдореИрдВ рдпрд╣рд╛рдВ рджреЗрдЦрддрд╛ рд╣реВрдВ рдХрд┐ рдпрд╣ рдПрдХ рдпреЛрдЧрджрд╛рди рд╕реНрд╡рд╛рдЧрдд рд▓реЗрдмрд▓ рд╣реИред
рдЕрдЧрд░ рдХреЛрдИ рдореЗрд░реА рдорджрдж рдХрд░ рд╕рдХрддрд╛ рд╣реИ рддреЛ рдореИрдВ рдЕрдЧрд░ рд╕рдВрднрд╡ рд╣реЛ рддреЛ рдЗрд╕реЗ рдареАрдХ рдХрд░рдирд╛ рд╢реБрд░реВ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ?
(рдореИрдВрдиреЗ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рд╕реНрдерд╛рдкрд┐рдд рдХрд┐рдпрд╛ рдФрд░ рдкрд░реАрдХреНрд╖рдг рдФрд░ рдирд┐рд░реНрдорд╛рдг рдЪрд▓рд╛ рд╕рдХрддрд╛ рд╣реИред)
рдирдорд╕реНрддреЗ, рдЗрд╕ рдкрд░ рдХреЛрдИ рдЕрджреНрдпрддрди? рдЕрднреА рднреА nuxt 2.14 рдХреЗ рд╕рд╛рде рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИ
рдирдорд╕реНрддреЗ, рдЗрд╕ рдкрд░ рдХреЛрдИ рдЕрджреНрдпрддрди? рдЕрднреА рднреА nuxt 2.14 рдХреЗ рд╕рд╛рде рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИ
+1
рдЕрднреА рднреА рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИ,
[email protected]
[email protected]
[email protected]
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рд╣реЗ рд▓реЛрдЧреЛрдВред рдореИрдВ рджреИрдирд┐рдХ рдЖрдзрд╛рд░ рдкрд░ рдкреНрд░рддрд┐рдЬреНрдЮрд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВ рдФрд░ рдореИрдВ рдпреЛрдЧрджрд╛рди рджреЗрдирд╛ рдЪрд╛рд╣реВрдВрдЧрд╛ред рдореИрдВ рдпрд╣рд╛рдВ рджреЗрдЦрддрд╛ рд╣реВрдВ рдХрд┐ рдпрд╣ рдПрдХ рдпреЛрдЧрджрд╛рди рд╕реНрд╡рд╛рдЧрдд рд▓реЗрдмрд▓ рд╣реИред
рдЕрдЧрд░ рдХреЛрдИ рдореЗрд░реА рдорджрдж рдХрд░ рд╕рдХрддрд╛ рд╣реИ рддреЛ рдореИрдВ рдЕрдЧрд░ рд╕рдВрднрд╡ рд╣реЛ рддреЛ рдЗрд╕реЗ рдареАрдХ рдХрд░рдирд╛ рд╢реБрд░реВ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ?
(рдореИрдВрдиреЗ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рд╕реНрдерд╛рдкрд┐рдд рдХрд┐рдпрд╛ рдФрд░ рдкрд░реАрдХреНрд╖рдг рдФрд░ рдирд┐рд░реНрдорд╛рдг рдЪрд▓рд╛ рд╕рдХрддрд╛ рд╣реИред)