Docs/update-readme-usecases

README.md

@@ -1,7 +1,23 @@
-# Vue Web Component Library
+# Vue Web Component Library (WIP)
 
 A Vue-based accessible design system with headless web components. This library provides accessible, customizable components that can be imported individually to optimize bundle size.
 
+> This library is WIP (Work-In-Progress)
+
+## Is This Library Right For You?
+
+This library is framework agnostic at the component level, but requires Vue.js as a dependency to function. Consider this library if:
+
+- Your application doesn't have a framework yet and you're looking for a solid foundation to build on
+- Your application is already built with Vue.js and you need consistent, accessible components
+- You want to use the same components across multiple projects with different technologies
+
+Note that if your main application uses React, Angular, or another non-Vue framework, you might want to consider a framework-specific component library instead for better integration:
+
+- For **React** applications: [shadcn/ui](https://ui.shadcn.com/) offers beautifully designed components that you can copy and paste into your apps
+- For **Angular** applications: [Angular Material](https://material.angular.io/) provides a comprehensive suite of UI components following Material Design principles
+
+
 ## Features
 
 - 🧩 **Web Components**: Use anywhere, framework-agnostic

apps/documentation/.vitepress/config.mjs

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vitepress'
+import { resolve } from 'path'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -36,6 +37,16 @@ export default defineConfig({
   vite: {
     optimizeDeps: {
       include: ['marked']
-    }
+    },
+    // resolve: {
+    //   alias: {
+    //     '@devbyray/vue-wc-components': resolve(__dirname, '../../../packages/components')
+    //   }
+    // },
+    // build: {
+    //   commonjsOptions: {
+    //     strictRequires: true
+    //   }
+    // }
   }
 })

apps/documentation/.vitepress/theme/index.js

@@ -2,7 +2,9 @@
 import { h } from 'vue'
 import DefaultTheme from 'vitepress/theme'
 import MarkdownImporter from '../../components/MarkdownImporter.vue'
+import ComponentExample from '../../components/ComponentExample.vue'
 import './style.css'
+import '@devbyray/vue-wc-components'
 
 /** @type {import('vitepress').Theme} */
 export default {
@@ -15,5 +17,7 @@ export default {
   enhanceApp({ app, router, siteData }) {
     // ...
     app.component('MarkdownImporter', MarkdownImporter)
+    app.component('ComponentExample', ComponentExample)
+
   }
 }

apps/documentation/.vitepress/theme/style.css

@@ -42,7 +42,7 @@
  * - `danger`: Used to show error, or dangerous message to the users. Used
  *   in custom container, badges, etc.
  * -------------------------------------------------------------------------- */
-
+ @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded');
 :root {
   --vp-c-default-1: var(--vp-c-gray-1);
   --vp-c-default-2: var(--vp-c-gray-2);