Using @vue/server-renderer (vuejs 3) how do you get the CSS?

Viewed 212

I have been able to set up Server side rendering with Vuejs 3 using the code below but the renderToString method doesn't include the CSS and I also need to get the CSS rendered by the components.

example

const { renderToString } = require('@vue/server-renderer')
const createApp = require('./server/app').default


module.exports = async function (settings) {
    const { app, router } = createApp(settings);
    if (settings && settings.url) {
        router.push(settings.url);
        await router.isReady()
    }
   

    const html = await renderToString(app);
    var toRet = { html: html, css: 'Still Need to get' };
    return toRet;

};

The Single File Components so far are just boilerplate code specifying the CSS as scoped (shown below) but I'm also debating using CSS modules. I need the CSS in the Javascript file and not loaded separately as the site will be ran both in a Client Side manner with no Server Rendering and a Server Rendering manner.

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
0 Answers
Related