Installation

Pinceau is a Vite plugin, that ships as a NPM dependency.

npm install pinceau --save-dev

yarn add pinceau --save-dev

pnpm install -D pinceau

Vite

Once the dependency is installed, you can add the plugin to your Vite config.

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.

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.