Possible to convert class based styles to inline styles for VueJS component?

Question

I'm trying to write a VueJS component that I will then be converting to a canvas element so that it can be downloaded as an image. I'm using the library rasterizeHTML to convert my HTML to canvas.

This is working well; however, I'm finding that the library doesn't respect styles written in the tag of a Vue component, but I've managed to get it working using inline styles.

That leads me to my question: I'd prefer to write CSS in the Vue tag of my single file component, but I'm looking for some way to then transform that CSS into inline styles. This would ideally be done through Webpack. Are there any solutions to do this? I'm looking for a way to directly transform the CSS into the inline styles for each component (not though computed properties or methods) for the easiest management of my CSS.

Dan · Accepted Answer · 2020-03-05 16:00:30Z

1

You can create inline styles using an object binding. For example:

:style="{ background: 'black', color: textColor }"

In this example, the background color uses a string literal, and the text color uses a property on the instance. Run the snippet below and inspect the HTML in DevTools to see that the styles are inline.

new Vue({
  el: '#app',
  data() {
    return {
      textColor: 'yellow'
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div :style="{ background: 'black', color: textColor }">
  This div block uses inline styles which you can inspect in DevTools.
  The background color is a string literal and the text color uses a data property.
  </div>
</div>

answered Mar 5, 2020 at 16:00

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Khalid Adil Over a year ago

Thanks for replying Dan! In this case, I'm looking for a way that I can leave CSS in my Vue style tag and have it be applied as an inline style to my HTML. I've done the data/computed/method route before to apply styles as an object or an array, but I'm looking for a cleaner method so that my styles remain manageable.

Dan Over a year ago

So are you saying you'd like to use class names in the template and have those compiled to inline styles taken from the correlating <style> classes?

Khalid Adil Over a year ago

yes, I'm trying to take the computed styles in the <style> tag and make them inline styles in a Vue friendly way for all elements in the generated HTML

Dan Over a year ago

I see. Maybe there is some plugin that could do this. Another idea would be getting the classes to a form that the library respects.

Collectives™ on Stack Overflow

Possible to convert class based styles to inline styles for VueJS component?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related