chore: Update package version to 1.6.3 and fix style tag injection is…

…sue and update docs for vuetify

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file. The format
 
 ## [Unreleased]
 
+## [1.6.3] - 12.07.2024
+### Added
+- Fixed issue with style tag injection order SFC
+- Fixed duplicate style tags for cssFrameworkStyles
+
 ## [1.6.2] - 05.07.2024
 ### Fixed
 - Fixed issue style tag injection order

README.md

@@ -23,8 +23,10 @@ Check out these demo projects to see `vue-web-component-wrapper` in action:
 - **Webpack implentaion**: Check out this [Webpack Demo Project](https://stackblitz.com/edit/vue-web-component-wrapper?file=README.md&startScript=webpack-demo)
 - **Vite.js implentaion**: Check out this [Vite Demo Project](https://stackblitz.com/edit/vue-web-component-wrapper?file=README.md&startScript=vite-demo)
 
+
+
 ## Documentation
-Check out the [Docs](https://erangrin.github.io/vue-web-component-wrapper)
+See [Docs](https://erangrin.github.io/vue-web-component-wrapper)
 
 ## Key Features:
 - **Vue Plugins Compatibility**: Seamlessly integrates with Vue ecosystem plugins such as Vuex, Vue Router, and Vue I18n.
@@ -41,6 +43,13 @@ Check out the [Docs](https://erangrin.github.io/vue-web-component-wrapper)
 - **Disable Shadow DOM**: Disable shadow DOM for web components.
 
 
+## CSS Frameworks Examples
+- **Tailwind CSS** - [Demo](https://stackblitz.com/edit/vue-web-component-wrapper?file=README.md&startScript=tailwind-demo)
+- **UnoCSS** - [Demo](https://stackblitz.com/~/github.com/EranGrin/element-plus-unocss-web-component?file=src/style.css:L1-L2)
+- **Vuetify** - [Demo](https://stackblitz.com/~/github.com/EranGrin/vuetify-web-component-wrapper)
+- **Element Plus** - [Demo](https://stackblitz.com/~/github.com/EranGrin/element-plus-unocss-web-component?file=src/style.css:L1-L2)
+See documentation for more details [Docs](https://erangrin.github.io/vue-web-component-wrapper)
+
 ## Installation
 
 ```bash
@@ -301,7 +310,7 @@ customElements.define('my-component', MyComponentElement)
 ## Future Plans
 
 1. **TypeScript Support**: Adding proper strict types.
-2. **Vuetify Example**: Adding an example usage with Vuetify.
+
 
 
 ## Contributing

docs/vuetify.md

@@ -0,0 +1,63 @@
+## Demo
+https://stackblitz.com/~/github.com/EranGrin/vuetify-web-component-wrapper
+
+## Usage
+
+1. **Install Vuetify**:
+    ```bash
+    npm install vuetify
+    ```
+    or
+    ```bash
+    yarn add vuetify
+    ```
+2. **Create the vutify plugin configuration file**:
+    ```javascript
+    // Styles
+    import '@mdi/font/css/materialdesignicons.css'
+    import 'vuetify/styles'
+
+    // Composables
+    import { createVuetify } from 'vuetify'
+
+    export default createVuetify({
+    theme: {
+        defaultTheme: 'dark',
+    },
+    })
+    ```
+3. **Add the plugin to the plugins warpper**:
+    ```javascript
+    import vuetify from './vuetify'
+
+    export const pluginsWrapper = {
+        install(GivenVue: any) {
+            const Vue = GivenVue
+
+            Vue.use(vuetify)
+        }
+    }
+    ```
+4. **Create style.css file**:
+    ```css
+    @import 'vuetify/dist/vuetify.min.css';
+    ```
+    you can add any global css to this file
+5. **Import the style.css file with ?inline**:<br>
+    ```javascript
+    import style from './style.css?inline';
+    ```
+6. **Create your web component** passing the style variable as the cssFrameworkStyles option:<br>
+    ```javascript
+    createWebComponent({
+      rootComponent: App,
+      elementName: 'my-web-component',
+      plugins: pluginsWrapper,
+      cssFrameworkStyles: style,
+      VueDefineCustomElement,
+      h,
+      createApp,
+      getCurrentInstance,
+      disableStyleRemoval: false,
+    });
+    ```

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-web-component-wrapper",
-    "version": "1.6.2",
+    "version": "1.6.3",
     "description": "A Vue 3 plugin that provides a web component wrapper with styles, seamlessly integrating with Vuex, Vue Router, Vue I18n, and supporting Tailwind CSS and Sass styles.",
     "repository": {
         "type": "git",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-web-component-wrapper",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "A Vue 3 plugin that provides a web component wrapper with styles, seamlessly integrating with Vuex, Vue Router, Vue I18n, and supporting Tailwind CSS and Sass styles.",
   "types": "types.d.ts",
   "repository": {