[Vuejs]-Add CSS rules from textarea using v-html

3👍

✅

Old answer, below is better one

Add textarea with v-model:
<textarea v-model="css" />
You can create style tag in onMounted hook:
onMounted(() => {
  const style = document.createElement("style");
  style.type = "text/css";
  updateCss(style, css.value);

  document.getElementsByTagName("head")[0].appendChild(style);

  el.value = style;
});
You must be able to access this element later, so assign style to
el.value.

Then add watch on input value:
watch(css, () => {
  updateCss(el.value, css.value);
});
Where updateCss is a function:
const updateCss = (el, css) => {
  if (el.styleSheet) {
    el.styleSheet.cssText = css.value;
  } else {
    el.innerHTML = "";
    el.appendChild(document.createTextNode(css));
  }
};
Demo:

https://codesandbox.io/s/c**ky-mestorf-uqz6f?file=/src/App.vue:246-463

Edit

I found much better solution:

<template>
  <textarea v-model="css" />
  <component :is="'style'" type="text/css" v-text="css"></component>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const css = ref("body { background-color: blue; }");
    return { css };
  },
};
</script>

Component doesn’t throw the error about style tag: