将全局 CSS 应用于注入的 HTML (v-html)

Question

I'm trying to inject HTML from my database using Vue. I'm able to successfully inject HTML however the problem I'm having is my framework stylesheet (Vuetify) isn't being applied.
It's applied to the rest of the page just not the injected HTML.

How can I get the injected HTML to use my Vuetify CSS?

Also, the images in my HTML aren't rendered either although I can see them when inspecting the HTML.

<div v-html="post.format"></div>

Output HTML:

<div>
  <v-container grid-list-md="" text-xs-center="">
    <v-layout row="" wrap="">
      <v-flex xs12="" md12="" lg6="">
        <p class="text-lg-left">Post description text</p>
      </v-flex>
      <v-flex xs12="" md12="" lg6="">
        <v-img class="center" style="max-width:250px" src="/img/1.jpg"></v-img>
      </v-flex>
    </v-layout>

  </v-container>

  <v-container grid-list-md="" text-xs-center="">
    <v-layout row="" wrap="">
      <v-flex xs12="" md12="" lg6="">
        <v-img width="250px" class="center" src="/img/2.jpg">
        </v-img>
      </v-flex>
      <v-flex xs12="" md12="" lg6="">
        <p class="text-lg-left">More post description text</p>
      </v-flex>
    </v-layout>
  </v-container>
</div>

Answer 1

As @Husam mentioned, Vue won't allow you to do this. It's ultimately for the best, and even v-html should be used with caution. Regarding the css, from the Vue.js site :

In single-file components, scoped styles will not apply to content inside v-html, because that HTML is not processed by Vue's template compiler. If you want to target v-html content with scoped CSS, you can instead use CSS modules or an additional, global element with a manual scoping strategy such as BEM.

As for a better way, judging from the look of your output, I'd suggest storing your straight-text data in a database/collection, and making a component template for this type of post. In your database/collection, you could store the title, description, imageURL, and perhaps a componentType. Then, when rendering, you could render the particular component type from what was stored in the db.

That would be cleaner, safer, and perhaps easier to maintain. I created a sample of what I'm talking about here on CodeSandbox. The sandbox is preventing the images from loading but it's there. I split your output into two different components to see also.