Quick Start

🌏 Translated with the assistance of DeepSeek and ChatGPT

Installation

Pick your favorite package manager.

npm

npm install @pixelium/web-vue

yarn

yarn @pixelium/web-vue

pnpm

pnpm install @pixelium/web-vue

Compatibility

Pixelium Design supports running in the following environments:

ECMAScript	Edge	Firefox	Chrome	Safari
≥2020	≥88	≥78	≥87	≥14

If you need to support older browsers, please add Babel and the corresponding polyfills yourself.

Full Import

If you don't care about bundle size, or you will be using almost every component, we recommend full import.

import { createApp } from 'vue'
import App from './App.vue'
import Pixelium from '@pixelium/web-vue'
import '@pixelium/web-vue/dist/pixelium-vue.css'
// Import the font
import '@pixelium/web-vue/dist/font.css'

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

On-demand Import

Pixelium Design supports ESModule-based Tree Shaking.
You can perform on-demand imports directly from @pixelium/web-vue/es.

Style files are auto-imported; make sure your bundler supports importing styles from JS.

• Vite: works out-of-the-box;
• Webpack: usually needs css-loader + style-loader;
• Rollup: typically requires rollup-plugin-postcss and postcss;
• consult the docs for other bundlers.

Ensure your project uses TypeScript 4.7+ to avoid type-resolution issues.

// Import the font at the project entry
import '@pixelium/web-vue/dist/font.css'

// Use components in the business code by on-demand import
import { Button, Link } from '@pixelium/web-vue/es'