How to render a dynamic CSS stylesheet using Vue?

Hey guys,

I’m building an advanced WYSIWYG tool using Vue. For this, I need to dynamically render a CSS stylesheet based on some JavaScript data, in the <head> of a page.

What is the most performant way to do this? Vue uses the concept of scoped CSS, which is compiled at build time. It doesn’t allow runtime modification. What I need is the ability to modify, compile and render the CSS at runtime.

Current solution

I currently have a regular Vue component, in which I use a reducer to transform the JavaScript into a CSS string, which is rendered inside a <style> tag.

However, this entire string gets re-rendered on every single CSS change. This is not performant enough for my use case.

Desired solution

A solution that would render my CSS rules without relying on a single Vue component, so that it’s picked up by Vue’s Virtual DOM and benefits from its performance.

Now that I’m writing this, I think it might be a solution to render a Vue component for every single CSS class, but I’m not sure if that would work. I’m curious to hear other perspectives to this problem.