NoahUI

import Vue from 'vue';
import NoahUi from 'noah-ui';
import config from 'noah-ui/src/noah.config';

config.style.whitelist.push(
    // Let's define a rule, which will accept `corners="$size"` attribute, and transform it into
    // `.radius-$size` CSS class
    // <n-div md:corners="medium"> will become <div class="md:radius-medium">
    {
        // Pass the attributes (aliases) you want the directive to process
        attr: ['corners'],
        
        // Specifies what class prefix should be used 
        classPrefix: 'radius-',
        
        // Enable responsive/viewport prefixes, such as sm: md: lg: xl:
        responsive: true,
    },
    
    // If you are not expecting the attribute to have a value, you can specify the target class
    // <n-div circle> will become <div class="my-circle">
    {
        attrs: ['circle', 'circled'],
        class: 'my-circle',
    }
);

Vue.use(NoahUi, config);

import Vue from 'vue';
import NoahUi from 'noah-ui';
import config from 'noah-ui/src/noah.config';

config.components.NButton.modifierPrefix = 'btn-';

config.style.whitelist.push({
        attrs: ['foo'],
        classPrefix: 'foo-',
});

// When you render <n-div foo="bar"> you will get <div class="foo-bar">
// When rendering <n-button foo="bar">you will get <button class="btn-bar">

Vue.use(NoahUi, config);

import Vue from 'vue';
import NoahUi from 'noah-ui';
import config from 'noah-ui/src/noah.config';

config.components.NButton.classMap = { 'foo-bar': 'my-component-class' };

config.style.classMap = { 'foo-bar': 'my-global-class' };

// When you render <n-div foo="bar"> you will get <div class="my-global-class">
// When rendering <n-button foo="bar">you will get <button class="my-component-class">

Vue.use(NoahUi, config);