Create your own UI library based on unstyled PrimeVue core and Tailwind CSS.
Wrapping UI components to encapsulate customized behaviors is a common pattern when building your own UI library, especially in larger scale teams where a shared library is utilized amongst numerous applications. A major advantage of this approach is decoupling the dependency to a 3rd party library since the consuming applications depend on the shared library instead. PrimeVue unstyled core and Tailwind CSS would be a perfect toolset if you require to build a custom UI library. The main idea is to create your UI component by wrapping a PrimeVue component, pass your props as fall through and configure the pass-through Tailwind preset locally instead of a global configuration.
Let's build our own ToggleSwitch component inspired by Material Design. For this, we'll be using the PrimeVue InputSwitch component.
The template section consists of a wrapper flex container, a built-in label and the PrimeVue InputSwitch. Notice the use of v-bind="$attrs" as we'd like to apply any property passed to our own component to the underlying InputSwitch e.g. v-model and v-on events. Component here is responsible for the main functionality and accessibility while we focus on standardizing the design requirements.
<template>
<div class="flex items-center gap-4">
<label :for="$attrs.inputId">{{ label }}</label>
<InputSwitch v-bind="$attrs" />
</div>
</template>
The script sets inheritAttrs as false otherwise the fall through properties are applied to the main div container element. The additional props such as label are included as the props of our own component.
<script setup>
defineOptions({
inheritAttrs: false
});
defineProps(['label']);
</script>
So far so good as all the wiring is in place, time to apply our custom material design inspired style implemented with Tailwind utilities. The style is applied with the pt property of the InputSwitch locally, since we are using a local preset disable the merging with the global preset with ptOptions.
<template>
<div class="flex items-center gap-4">
<label :for="$attrs.inputId">{{ label }}</label>
<InputSwitch v-bind="$attrs" :pt="preset" :ptOptions="{ mergeSections: false, mergeProps: false }" />
</div>
</template>
The preset is a simple pt configuration based on the InputSwitch PassThrough API with some extensions, notice the use of attrs to add an accent mode which does not exist in the API of the PrimeVue InputSwitch. We're able to utilize arbitrary attributes to add functionality to the components we wrap without waiting for component library maintainer to add it for us. This is a great example of the PrimeVue philosophy, providing 3rd party UI library that is easy to tune and customize as if it were an in-house library.
<script setup>
defineOptions({
inheritAttrs: false
});
defineProps(['label']);
const preset = {
root: ({ props }) => ({
class: [
'inline-block relative',
'w-10 h-4',
{
'opacity-40 select-none pointer-events-none cursor-default': props.disabled
}
]
}),
slider: ({ props, state, attrs }) => ({
class: [
// Position
'absolute top-0 left-0 right-0 bottom-0 before:transform',
{ 'before:translate-x-5': props.modelValue },
{ 'before:-translate-x-1': !props.modelValue },
// Shape
'rounded-2xl',
// Before:
'before:absolute before:top-1/2',
'before:-mt-3',
'before:h-6 before:w-6',
'before:rounded-full',
'before:duration-200',
'before:flex before:justify-center before:items-center',
'before:[text-shadow:0px_0px_WHITE] before:text-transparent',
{ 'before:ring-4': state.focused },
{
"before:bg-surface-500 before:dark:bg-surface-500 before:content-['➖']": !props.modelValue,
"before:content-['✔️']": props.modelValue,
'before:bg-violet-500 before:ring-violet-300': !attrs.type & props.modelValue,
'before:bg-amber-500 before:ring-amber-300': attrs.type === 'accent' && props.modelValue
},
// Colors
'border border-transparent',
{
'bg-surface-200 dark:bg-surface-400 before:ring-surface-200 dark:before:ring-surface-400': !props.modelValue,
'bg-violet-300': !attrs.type & props.modelValue,
'bg-amber-300': attrs.type === 'accent' && props.modelValue
},
// States
{
'peer-hover:before:bg-surface-400 peer-hover:dark:before:bg-surface-600': !props.modelValue,
'peer-hover:before:bg-violet-600': !attrs.type & props.modelValue,
'peer-hover:before:bg-amber-600': attrs.type === 'accent' && props.modelValue
},
// Transition
'transition-colors duration-200',
// Misc
'cursor-pointer'
]
}),
input: {
class: [
'peer',
// Size
'w-full ',
'h-full',
// Position
'absolute',
'top-0 left-0',
'z-10',
// Spacing
'p-0',
'm-0',
// Shape
'opacity-0',
'rounded-[2.5rem]',
'outline-none',
// Misc
'appearance-none',
'cursor-pointer'
]
}
};
</script>
Let's wrap it up with an example demo. Looking good!
<ToggleSwitch v-model="checked1" inputId="primary" label="Primary" />
<ToggleSwitch v-model="checked2" inputId="accent" label="Accent" type="accent" />