@sky.ui/vue

Vue 3 SFC wrappers for Sky UI web components. Use <SkyButton> or <sky-button> in templates with optional auto-import and tree-shaking.

Install

npm install "@sky.ui/vue" "@sky.ui/core"

Quote scoped names ("@sky.ui/…") — required in PowerShell. See powershell-scoped-packages.md.

@sky.ui/core is required — wrappers delegate to the underlying custom elements.

Quick start

<script setup>
import { SkyButton, SkyCard } from '@sky.ui/vue';
</script>

<template>
  <SkyButton label="Save" />
</template>

Vite auto-import

Use components in templates without manual imports; only used components are bundled.

1. Install the resolver plugin:

   npm install unplugin-vue-components -D

2. Configure Vite:

   Option A — one-line plugin

   import Vue from '@vitejs/plugin-vue';
   import { SkyUIVueVitePlugin } from '@sky.ui/vue/vite';
   import { defineConfig } from 'vite';
   
   export default defineConfig({
     plugins: [Vue(), SkyUIVueVitePlugin()],
   });

   Option B — resolver only

   import Vue from '@vitejs/plugin-vue';
   import Components from 'unplugin-vue-components/vite';
   import { SkyUIVueResolver } from '@sky.ui/vue/auto-import';
   import { defineConfig } from 'vite';
   
   export default defineConfig({
     plugins: [
       Vue(),
       Components({ resolvers: [SkyUIVueResolver()], dts: true }),
     ],
   });

3. Use <SkyButton label="OK" /> or <sky-card>...</sky-card> without imports. Add generated components.d.ts to your tsconfig include.

Whole library (no tree-shaking)

SkyUIVueVitePlugin({ treeShake: false });

import '@sky.ui/vue/all';
import * as Sky from '@sky.ui/vue';

Webpack and Rollup

Webpack

import Components from 'unplugin-vue-components/webpack';
import { SkyUIVueResolver } from '@sky.ui/vue/auto-import';
import { SkyUIVueWebpackPlugin } from '@sky.ui/vue/webpack';

export default {
  plugins: [
    SkyUIVueWebpackPlugin(),
    Components({ resolvers: [SkyUIVueResolver()], dts: true }),
  ],
};

Rollup

import { SkyUIVueRollupPlugin } from '@sky.ui/vue/rollup';

export default {
  plugins: [SkyUIVueRollupPlugin(), /* Vue plugin, unplugin, etc. */],
};

Manual imports

Works with any bundler — no plugin required:

<script setup>
import { SkyButton, SkyCard } from '@sky.ui/vue';
</script>

Related packages

| Package | Use when | |---------|----------| | @sky.ui/core | Lit custom elements (required peer) | | @sky.ui/react | React wrappers | | @sky.ui.pro/vue | Pro-tier Vue wrappers |

Editor support

Install the Sky UI Components VS Code extension for Vue template completions, hover docs, and validation.

License

Sky UI Free EULA — proprietary; not open source.