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>