Installation
Pinceau is a Vite plugin, that ships as a NPM dependency.
npm install pinceau --save-dev
Vite
Once the dependency is installed, you can add the plugin to your Vite config.
vite.config.ts
import { defineConfig } from 'vite'
import Pinceau from 'pinceau/vite'
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
// https://pinceau.dev
Pinceau({ ...options }),
// https://vuejs.org
Vue(),
],
})
Defaults are enough to get started and enjoy the power of Pinceau.
Yet, it also comes with a lot of options for you to make it your own.
Learn more about the plugin available options.
Nuxt
If you are using Nuxt, then you only have to add the Nuxt module.
nuxt.config.ts
defineNuxtConfig({
modules: ['pinceau/nuxt'],
pinceau: {
...options
}
})
Module options are the same as plugin options.
Volar
To achieve full TypeScript support on most advanced features, Pinceau hooks into Volar.
⚠️ If you are using the Nuxt module, that step will be done automatically.
If you are using Vite, you need to manually add the Volar plugin in your tsconfig.json:
{
"compilerOptions": {
"paths": {
"#pinceau/theme": ["./node_modules/.vite/pinceau/index.ts"],
"#pinceau/utils": ["./node_modules/.vite/pinceau/utils.ts"],
"#pinceau/definitions": ["./node_modules/.vite/pinceau/definitions.ts"],
"pinceau.css": ["./node_modules/.vite/pinceau/theme/index.css"],
}
},
"vueCompilerOptions": {
"plugins": [
"pinceau/volar"
]
}
}
These few lines will enable type-checking inside <style lang="ts"> blocks both in your IDE and when type-checking the project with vue-tsc.