Installation

PXD itself is styled with Tailwind CSS 4, but the compiled stylesheet also works in projects without any CSS framework.

Setup style

See Styled for style setting.

Install

pnpm install pxd

Global Import

Registering the whole library in your entry file is the shortest setup, at the cost of pulling every component into the bundle.

// main.js
import { createApp } from 'vue'
import PXD from 'pxd'
import App from './App.vue'

createApp(App).use(PXD).mount('#app')

<template>
  <PButton>Click me</PButton>
</template>

Import on demand

Importing components one by one keeps the bundle tree-shakeable.

<script setup>
  import Button from 'pxd/components/button'
  // or
  // import { Button } from 'pxd'
</script>

<template>
  <Button>Click me</Button>
</template>

Import automatically

Let unplugin-vue-components resolve components for you with the bundled resolver.

pnpm install -D unplugin-vue-components

// vite.config.ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import PxdResolver from 'pxd/resolver'

export default defineConfig({
  plugins: [
    Vue(),
    Components({
      resolvers: [PxdResolver()],
    }),
  ],
})

<template>
  <PButton> Click me </PButton>
</template>

Volar support

Register the global component types in tsconfig.json to get completions for P-prefixed components without importing them.

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["pxd/volar"]
  }
}

If the types still do not apply, disable tsgo in the workspace:

// .vscode/settings.json
{
  "typescript.experimental.useTsgo": false
}

Vue 2.7

Vue 2.7 cannot compile the defineOptions() macro, so it needs the transform plugin.

pnpm install -D unplugin-vue-define-options@1.5.5

Then enable it in Vite or Rsbuild:

// vite.config.ts
import { defineConfig } from 'vite'
import defineOptions from 'unplugin-vue-define-options/vite'

export default defineConfig({
  plugins: [defineOptions()],
})

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core'
import { pluginVue } from '@rsbuild/plugin-vue'
import defineOptions from 'unplugin-vue-define-options/rspack'

export default defineConfig({
  plugins: [pluginVue()],
  tools: {
    rspack: {
      plugins: [defineOptions()],
    },
  },
})