Vue3-markdown-it not working with Vuetify 3 Stylesheet

Question

As title says, String formatting using Vue3-markdown-it library is not working with Vuetify 3 styles.

Just to find the root cause, As part of reproduceable demo, Below codesandbox links has been created :

Without Vuetify 3 Stylesheet - Working as per the expectation

With Vuetify 3 Stylesheet - Not working

After deep dive into the root cause analysis, I got to know that Vuetify is overriding the browser's default and the below global style from Vuetify is the victim.

* {
  padding: 0;
  margin: 0;
}

If I disable these style or assign a revert value to both the properties, It works fine for markdown elements but at the same time it impact another component of Vuetify.

Can someone please help me by suggesting a workaround or fix to get rid from this problem ?

Answer 1

It's just a rough idea if this helps-

The root cause seems to be related to Vuetify's reset of some browser defaults, which subsequently affects the rendering of markdown content. To address this issue without disrupting other Vuetify components, consider the following workaround (As I mentioned in the comments too):

Manual CSS Targeting:

Instead of attempting to reset the Vuetify global styles, you can apply manual CSS targeting specifically to the markdown elements. This way, the manual CSS adjustments will only impact the markdown component and leave other primary Vuetify components unaffected. For instance, you can apply the following CSS to your markdown wrapper:

<style scoped>
::v-deep#markdown-wrapper ul {
  padding-inline-start: 30px;
}
::v-deep#markdown-wrapper p {
  margin: 1em 0px !important;
  padding-inline-start: 30px;
}
</style>

This example only demonstrates for ul and p tags (as per your example), you can do the same for other elements as well.

The key idea is to isolate the CSS adjustments to the markdown component, ensuring that your customization doesn't inadvertently affect other crucial aspects of the Vuetify framework.

Here is the working sandbox.