VueJS Tooltip and PurgeCSS might give you some troubles in production

profile picture

VueJS Tooltip and PurgeCSS might give you some troubles in production

While I'm currently working on my new project findamaker.io, I noticed a strange behavior in production.

To put things into context, I'm using Laravel Mix Purge Css by Spatie, a laravel-mix plugin that lighten your css files.

And I'm also using v-tooltip to display nice tooltip helpers on some UI elements of the website.

The problem is that v-tooltip is not properly scanned by purgeCss, because the html template lays in the javascript directly.

Thus we need to "whitelist" a bunch of css classes so purgeCss does not remove those from the compiled CSS file.

In laravel mix we can do this quite simply:

.purgeCss({
    whitelistPatternsChildren: [/^tooltip$/]
})

Run npm run prod and you'll see that your tooltip is displaying correctly now !

vuejs
tooltip
purgecss

about me

profile picture

I consider myself as an IT Business Artisan. Or Consultant CTO if you prefer. I'm a self-taught Web Developper, coach and teacher. My main work is helping and guiding digital startups.

more about me

follow me

newsletter

A weekly email with the latests articles

2020 My Dynamic Production SPRL All rights Reserved.