Search code examples
vue.jsvuetify.jshtml-email

Loading an email template into a vuetify app

I am displaying email from an outlook email using MS Graph API. The content of the body is in html format so I am trying to add it via the v-html prop such as:

<div v-html="emailContent">

However, because the email has styles in it then its impacting the styling of my app such as the sidebar icons and things like that. Is there a way to contain the styles inside the div only?

Solution

  • Use an iframe with the srcdoc attribute to avoid the email styles interfering with your webpage styles:

    <iframe :srcdoc="emailContent"></iframe>

    This thread has further helpful information about iframe styling.