@sky.ui/vue

@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" "@lit-labs/vue-utils"
# Core runtime peers (required so Vite does not stub empty modules):
npm install lit "@lit-labs/motion" "@lit-labs/virtualizer" "@lit/context" d3 three

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

@sky.ui/core is a dependency of this package (npm installs it with @sky.ui/vue). Peer dependencies: vue, @lit-labs/vue-utils, plus the Core peers above.

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. The resolver imports each wrapper from its per-component subpath (@sky.ui/vue/sky-button) so Vite dev does not evaluate the package barrel.

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.

To restore the legacy named barrel import (import { SkyButton } from '@sky.ui/vue'):

SkyUIVueVitePlugin({ resolverOptions: { importStyle: 'barrel' } });

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 { SkyUIVueWebpackPlugin } from '@sky.ui/vue/webpack';

export default {
  plugins: [
    ...SkyUIVueWebpackPlugin({ dts: true }),
  ],
};

Rollup

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

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

Manual imports

Works with any bundler — no plugin required. Barrel imports are named re-exports; per-component paths use a default export:

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

Related packages

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.