What is Pinceau?

Pinceau is a playful styling framework for your Vue components.

It offers incrementally adoptable solutions that integrates nicely with existing components.

The objective is to take all the <style> related logic out of your <script> tags.

What does it look like?

Pinceau usage flows around your tokens.config file.

In this file, you can store all your Design tokens, Media queries and Utils properties.

import { defineTheme } from 'pinceau'
// Media queries
media: {
mobile: '(min-width: 320px)',
tablet: '(min-width: 768px)',
desktop: '(min-width: 1280px)'
// Some Design tokens
color: {
red: {
1: '#FCDFDA',
2: '#F48E7C',
3: '#ED4D31',
4: '#A0240E',
5: '#390D05',
green: {
1: '#CDF4E5',
2: '#9AE9CB',
3: '#36D397',
4: '#1B7D58',
5: '#072117',
space: {
1: '0.25rem',
2: '0.5rem',
3: '0.75rem',
4: '1rem'
// Utils properties
utils: {
px: (value: PropertyValue<'padding'>) => ({ paddingLeft: value, paddingRight: value }),
py: (value: PropertyValue<'padding'>) => ({ paddingTop: value, paddingBottom: value })

Once defined, these tokens will then be accessible accross you app in multiple ways.

  • In CSS or PostCSS, JS, TS or <style> tags:
<style lang="postcss">
button {
padding: $dt('space.1') $dt('space.2');
background-color: $dt('red.1');
@dark {
background-color: $dt('red.5')
@desktop {
padding: $dt('space.2') $dt('space.4');
const green500 = $dt('color.green.500');
  • Or even better, using the css() function in your <style lang="ts"> blocks:
<button class="my-button">
<slot />
<script setup>
color: computedStyle<keyof PinceauTheme['color']>('green'),
<style lang="ts">
'.my-button': {
px: '{space.4}',
color: 'white',
backgroundColor: (props) => `{color.${props.color}.4}`,
variants: {
size: {
sm: {
padding: '{space.2}'
md: {
padding: '{space.3}'
lg: {
padding: '{space.4}'
options: {
default: 'sm'

How does it work?

Pinceau is a Vite plugin that reads and transform your Vue components.

It also comes with a Nuxt module, that supports Nuxt Studio.

It starts with a configuration file, that supports:

Once you are all setup with your theme, you're all set to use the styling features: