Vue js v-html linked to a css stylesheet

Question

I have some html generated by a function on an external server and I can preview this in a tag. In a similar way I can get the css information.

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

created() {
    // Get the HTML from other server
    Axios.post(....).then((res) => {
      this.html = res.data;
    });

    // Get the CSS file from other server
    Axios.post(....).then((res) => {
          ... apply this result to the html somehow
    });

},

The html is displayed fine but I would like to apply the styles in the css. Is there a way of doing this?

I have tried including the file in the html source:

<link rel='stylesheet' type='text/css' href='css/default.css' />

but get the error:

Refused to apply style from 'http://localhost:8080/css/default.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Nikola Pavicevic · Accepted Answer · 2022-11-04 20:01:19Z

1

If you receive css information like html , try like following snippet:

const app = Vue.createApp({
  data() {
    return {
      html: '',
      css: ''
    }
  },
  computed: {
    htmlCss() {
      const res = this.html ? this.html + this.css : ''
      return res
    }
  },
  created() {
    // api call
    setTimeout(() => {
      const response = `<p>rrr</p>`
      this.html = response
    }, 1000)

    // api call
    setTimeout(() => {
      const response = 'p {color: red;} body {font-size: 2em;}'
      this.css = `<style>${response}</style>`
    }, 2000)
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-html="htmlCss"></div>
</div>

edited Nov 4, 2022 at 20:01

answered Nov 4, 2022 at 19:03

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

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

1 Comment

RGriffiths Over a year ago

That works perfectly. Out of interest I am also trying to include some js in the same way (hide/show elements) but it doesn't appear to be working. For example sending across <script>alert('test')</script> does nothing. Is this possible?

Collectives™ on Stack Overflow

Vue js v-html linked to a css stylesheet

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related