Overview

If you’re a developer looking to create flexible and isolated WebComponents using Vue and UnoCSS, this starter project might be exactly what you need. Built to simplify the process of developing agnostic libraries, it addresses the common challenges associated with styling within embedded UIs, such as browser extensions or development tool interfaces. The integration of Vue for logic and UnoCSS for styling ensures a seamless experience while maintaining true style isolation through Shadow DOM.

This starter project is designed for scenarios where you want to embed UI components without running into issues with global styles affecting your components. It’s a practical solution that tackles complications in CSS, allowing you to focus on building customizable components that work effectively across various environments.

Features

• Style Isolation with Shadow DOM: Utilizes Shadow DOM for true style isolation, preventing external CSS from affecting your component’s styles.

• Integration of Vue and UnoCSS: Leverages Vue’s powerful features alongside UnoCSS for efficient styling, ensuring a smooth development process.

• Custom Script for CSS Tokens: Includes a dedicated script to generate CSS tokens with UnoCSS, making it easier to manage your styles.

• Bundling Vue Components: Uses unplugin-vue to bundle Vue components into JavaScript, simplifying the packaging process for your library.

• Versatile Target Scenarios: Ideal for scenarios like embed/injected UI and modules, while excluding full-page UIs or SSR libraries.

• User-Friendly Setup: Designed to make it easy to get started with building your own agnostic library without extensive configuration.

• MIT License: Open-source under the MIT license, encouraging collaboration and enhancement from the developer community.