1

I have a Vuetify application that customers can embed on their websites.

Problem A:

What can happen sometimes is that our Vue app conflicts with the CSS of the customers web page. Generic class names like row, col, or container mess up their design.

Solution A:

We can solve this by prefixing our generic class names with the parent element which is unique. We can run some regex on our css file to prefix everything. So .row{} becomes #unique-parent-div .row {} which solves the problem on our side.

Problem B:

But what if the problem is the other way around and the host webpage conflicts with our Vue app? We can't make changes to our customers web page. We could ask them but it would very annoying to our customers.

We can't really change our class names either because this is what happens in vuetify:

  <v-layout row wrap>
   <v-col cols="12" class="pa-0">

Vuetify automatically turns these into HTML with generic class names like row, col and layout, which gets the customers CSS into our application, breaking the design.

Is there any way to solve this? Perhaps changing the default class names in vue, or somehow block the host CSS?

What I have tried

I tried setting this (and several variations) in my root element without any success:

#root-element,
#root-element::before,
#root-element::after,
#root-element *
#root-element *::before,
#root-element *::after {
  all: initial;
}
CapFrans
  • 11
  • 1
  • Can you use [iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) ? – Beniamin H Jan 07 '21 at 16:18
  • It suppose this is what you're looking for: https://github.com/vuetifyjs/vuetify/issues/1561 – Beniamin H Jan 07 '21 at 16:22
  • @BeniaminH Unfortunatly no – CapFrans Jan 11 '21 at 13:30
  • why can't you use an iframe? A same-domain one generated by the JS that you write. It would mean you would have access to the scope of your Vue app through the parent page using an interface that you control to do things like change width and height, whilst at the same time your css is in its own scope – ness-EE Dec 01 '21 at 15:51
  • Because our customers don't host our application. We host it so when we update it, everyone automatically uses the latest version. We only give the customers a small piece of javascript code that links to our application, a "paste code and forget" type of thing because our customers are not tech savvy. – CapFrans Dec 03 '21 at 16:48
  • Actually, I just reread your comment and this could actually be a good solution.... Thanks so much! Will definitely look into this. – CapFrans Dec 03 '21 at 16:54

0 Answers0