@dobbel said in How to prevent CSS conflicts when creating a UI component using Quasar app extension?:

So does that mean that your Quasar extension can be used outside of Quasar Apps?

Yes, this component can be used outside of Quasar applications.

@dobbel said in How to prevent CSS conflicts when creating a UI component using Quasar app extension?:

If so then why did you choose to create your standalone ‘UI widget’ as a Quasar App extension instead of using Quasar’s UMD to avoid css conflicts?

• Familiarity with Quasar, and
• to get started quickly in presence of fair amount of complexity in the plugin
  are the reasons why I chose Quasar.

When we build the plugin and use the UMD version generated by the build, then we have to use Quasar’s UMD CSS and scripts in order to get the plugin working.

Update on the first plan: I am using a PostCSS plugin to append some text to all the CSS rules. Will update further.

I am creating a Quasar App Extension for a UI component that I plan to distribute via NPM. I have created the UI component. However, when I place it on various websites then the CSS conflicts are leading to a broken UI. I am familiar with VueJS and I have used Quasar for building applications.

As we can use Quasar in existing project, I believe, that someone must have faced this issue.

How to develop a UI App Extension that can be used on multiple websites without breaking existing UI?

What I am planning?

• Append some text to all the CSS rules. This will change the names of all the rules and likely prevent CSS conflicts
  • I need suggestions for a smart way to do this
• Write the whole plugin from scratch just using VueJS and CSS

You should look into this https://github.com/quasarframework/quasar/issues/2299

I was also looking stuck in a similar problem recently. I found this issue that might be relevant to you.