open-index/open-npm huggingface dataset:
npm package: @pospisk/shadow-vue
Description: Utilities to mirror Vue/Vite/PrimeVue styles into a Shadow DOM and neutralize head styles.
Latest version: 0.1.3

# @pospisk/shadow-vue

Mirror Framework/Vite/PrimeVue styles into a Shadow DOM host and neutralize head styles so your light DOM stays untouched.

## Install

```bash
npm i @pospisk/shadow-vue
```

```bash
bun i @pospisk/shadow-vue
```

```bash
pnpm add @pospisk/shadow-vue
```

```bash
yarn add @pospisk/shadow-vue
```

## Usage

Inside the main.ts file:

```ts
import { installVueCssLinkMarker, createShadowHost } from "@pospisk/shadow-vue";
installVueCssLinkMarker(); // this has to be at the top

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';

import './style.css';
import App from './App.vue';

const host = document.getElementById('app')!;
const { shadow, appRoot } = createShadowHost(host);

const overlayContainer = (() => {
    const el = document.createElement('div');
    el.setAttribute('data-overlay-root', '');
    shadow.appendChild(el);
    return el;
})();

const app = createApp(App);

app.use(PrimeVue, {
    theme: {
        preset: Aura,
    }
});

// Provide the overlay container app-wide so components can bind :appendTo
app.provide('primevue-overlay-container', overlayContainer);

app.mount(appRoot as any);
```