Using Vue.js to connect v-html to a custom CSS stylesheet

Question

Using Vue.js to connect v-html to a custom CSS stylesheet

I am currently working with HTML generated by a function on an external server and I am able to preview this within a tag. Additionally, I can retrieve the CSS information in a similar manner.

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

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

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

The HTML content is displayed correctly but now I am looking for a way to incorporate the styles from the CSS. Is there a method that can help me achieve this?

One approach I have attempted is embedding the CSS file directly into the HTML source:

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

However, upon doing so, I encountered the following 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.

javascript vue.js vuejs3

Answer 1

Answer №1

If you have received css information in a format similar to html, you can implement it using the code snippet below:

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

    // Make another 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>

Answer 2

If you have received css information in a format similar to html, you can implement it using the code snippet below:

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

    // Make another 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>

Using Vue.js to connect v-html to a custom CSS stylesheet

Answer №1

Similar questions

Using a Javascript array within a Bootstrap carousel allows for dynamic content to

Click on the input to add or remove a value

Node unable to interpret accented characters from CSV file input

Refreshing is not necessary when submitting a form using Ajax to post data

Error in Internet Explorer when attempting to close a Fancybox iframe that plays a YouTube video

Sharing image using the MEAN stack

Experiencing trouble with detecting intersections using the Three.js raycaster

When executed, the Node application successfully compiles

Refreshing dynamically added rows through ajax updates

Combining strings from an array while restricting repeated characters

Ensure to preselect the radio button based on the Day's value

Is it possible to open a PDF file in a new tab using Angular 4?

Divide the sentence using unique symbols to break it into individual words, while also maintaining

monitoring checkbox status in vue?

Is setting cache: 'no-store' in a fetch request enough to mimic client-side rendering behavior in Next.js?

Upon loading the page, trigger the controller method by utilizing the information from the query string

What is the most efficient way to retrieve the current user's ID within Loopback?

Toggle the play/pause function by clicking - Trigger Ajax

I am having trouble getting Google Maps to load

JavaScript application that features an audio player complete with a dynamic progress bar and customizable tags