Makes your
<script>
lighter and your<style>
smarter.
🎨 Start painting • 🧑🎨 Documentation
- Ships 0b of JavaScript to the client by default
- Design tokens compatible configuration system
- Fully-typed styling API
- Developer Experience that feels like a native Vue feature
- Plug & play with Nuxt 3 and Vite
- Used by @nuxt-themes ecosystem
- Ready for Nuxt Studio
- Pinceau VSCode extension for DX Sugar
- Integrated with Volar
Pinceau is still under heavy development, if you are missing some parts of the documentation, please open an issue and describe your problem. I'll be happy to help.
npm i pinceau
Nuxt
// nuxt.config.js
export default defineNuxtConfig({
modules: [
'pinceau/nuxt',
],
pinceau: {
...PinceauOptions
}
})
Example: playground/
This module only works with Nuxt 3.
Vite
// vite.config.ts
import Pinceau from 'pinceau/vite'
export default defineConfig({
plugins: [
Pinceau(PinceauOptions),
],
})
Example: playground/_vite.config.ts
Create your theme
// tokens.config.ts
import { defineTheme } from 'pinceau'
export default defineTheme({
// 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 })
}
})
Example: playground/theme/tokens.config.ts
Learn more about Pinceau on the documentation.
Thanks to these amazing people that helped me along the way:
This package takes a lot of inspiration in these amazing projects:
MIT License © 2022-PRESENT Yaël GUILLOUX
“All you need to paint is a few tools, a little instruction, and a vision in your mind.” • Bob Ross