@wwtdev/bsds-components-vue3 1.16.4 → 2.0.0

package/README.md

@@ -1,39 +1,58 @@
-# BSDS Components for Vue 3
+# BSDS Components Library
 
-## Installation
+## Installation & Usage
 
 ```bash
 npm install --save @wwtdev/bsds-components-vue3
 ```
-## Using the components in your Vue App
 
-Add the following to your `main.js` file to import and use the component library:
+### Vue App Setup
 
-```javascript
-import { ComponentLibrary } from '@wwtdev/bsds-components-vue3';
-import '@wwtdev/bsds-components/dist/components/components.css'
+Add the following to your `main.js` file to import styles:
 
-createApp(App).use(ComponentLibrary).mount('#app')
+```javascript
+/* Blue Steel Styles
+ @wwtdev/bsds-css and @wwtdev/bsds-icons-vue3
+ will be installed as dependencies of this package
+*/
+import '@wwtdev/bsds-components-vue3/components.css'
+import '@wwtdev/bsds-icons-vue3/lib/style.css'
 ```
 
-Now you can use BSDS Components in your code, just like standard Vue components:
+**Note** that the CSS framework is _included_ in `@wwtdev/bsds-components-vue3/components.css`, along with a few additional styles needed for the Vue components.  This means that you do not need to import `@wwtdev/bsds-css/dist/wwt-bsds.min.css` separately.
+
+#### Migration from v1
+1. Remove the `@wwtdev/bsds-components` package, as this Vue 3 package no longer depends on a base web component library.
+2. This package no longer provides or requires a Vue plugin, so remove any imports / logic related to that. 
+3. These components no longer render custom element tags (e.g., `<bs-input-field>` is now `<div data-component="bs-input-field">`), so if you have any CSS rules or DOM-related logic that relied on the previous version's custom element tag selectors, you'll need to update those accordingly. 
+
+
+### Nuxt App Setup
+
+Add the following to your `nuxt.config.js` file to import styles:
 
+```javascript
+export default defineNuxtConfig({
+  ...
+  css: [
+    '@wwtdev/bsds-components-vue3/components.css',
+    '@wwtdev/bsds-icons-vue3/lib/style.css'
+  ],
+  ...
+})
+```
+
+### Usage
 ```javascript
 <script setup>
 import { BsButton } from '@wwtdev/bsds-components-vue3'
+import { BsIconCaretRight } from '@wwtdev/bsds-icons-vue3'
 </script>
 
 <template>
   <div>
     <BsButton>Hello World!</BsButton>
+    <BsIconCaretRight />
   </div>
 </template>
 ```
-
-## Using the components in your Nuxt 3 app
-
-For Nuxt apps, we have a [@wwtdev/bsds-nuxt](https://npmjs.com/package/@wwtdev/bsds-nuxt) module.  Refer to those instructions.    
-
-### Caveats
-- Currently an issue where Vue components clash with Web Components in Nuxt apps. Investigating a fix to Vue wrappers to resolve.
-- Currently looking into a known issue wherein multi-word props are lost during hydration after SSR.