How to process Vue JS class bindings?

[tomnyc]

I am using Vue 2. I have a class binding that applies the class 'active' if needed:

<a class="tab" :class="{ active: tab == 'tab1' }" href="#"></a>

I am using Laravel with Laravel Mix. When using .purgeCss() my CSS file gets cleaned off many classes that I don't need but I am also losing some classes I need. So my class .tab.active is deleted by purgeCss. How can I tell purgeCss to read my Vue class bindings and keep the needed CSS?

[cjmaxik]

2 options:

1. Using comments with needed classes

   <!-- tab active -->
   <a class="tab" :class="{ active: tab == 'tab1' }" href="#"></a>

2. Using purgeCss option:

   .purgeCss({
       // Other options
       whitelistPatterns: [/tab/, /active/],
   });