[Vuejs]-Set content of vue 3 single file components' style tag

by

0👍

✅

You can encapsulate the data inside the style tags inside the component tag provided by vue in this manner ->

  <component :is="'style'"> .test-class { color: red; }....Your style data </component>

An example of the same can be found in this project I created

https://codesandbox.io/s/interesting-dewdney-id9erd?file=/src/components/HelloWorld.vue

Edit 1 =>
After reading the comment as I think the CSS scope compilation is done during the build process not during runtime thus having css at runtime won’t scope it an alternate solution for this can be embedding your HTML code inside an iframe and passing your code to the iframe using the srcdoc attribute.An example of the same is given below

https://codesandbox.io/s/currying-cherry-zzv3wk?file=/src/components/HelloWorld.vue

<template>
  <iframe style="width: 100vw; height: 80vh" :srcdoc="htmlCssCode"></iframe>
</template>

<script>
export default {
  data() {
    return {
      htmlCssCode: `Your Html code here`

<html>

0👍

Here is an example of passing that can pass dynamic HTML data in your project with an example using style tags

<template>
  <div>
    <div v-html="template" :style="style"></div>
  </div>
</template>

<script>
export default {
  name: 'DynamicTemplate',
  props: {
    template: {
      type: String,
      required: true
    },
    style: {
      type: Object,
      required: false,
      default: () => {}
    }
  }
}
</script>

Here is the component being used.

<DynamicTemplate
  :template="<p>This is some dynamic HTML content</p>"
  :style="{ color: 'red', font-size: '14px' }">
</DynamicTemplate>

0👍

Here is an example of passing that can pass dynamic HTML data in your project with an example of passing classes dynamically

<template>
  <div>
    <div v-html="template" :class="classes"></div>
  </div>
</template>

<script>
export default {
  name: 'DynamicTemplate',
  props: {
    template: {
      type: String,
      required: true
    },
    classes: {
      type: Object,
      required: false,
      default: () => {}
    }
  }
}
</script>

Here is the component being used.

<DynamicTemplate
  :template="template"
  :classes="classes"
/>

Leave a comment