diff --git a/CHANGELOG.md b/CHANGELOG.md
index 64cd602..04d5bba 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/README.md b/README.md
index e15e153..f54ca33 100644
--- a/README.md
+++ b/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
diff --git a/docs/vuetify.md b/docs/vuetify.md
new file mode 100644
index 0000000..fa8cf15
--- /dev/null
+++ b/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**:
+ ```javascript
+ import style from './style.css?inline';
+ ```
+6. **Create your web component** passing the style variable as the cssFrameworkStyles option:
+ ```javascript
+ createWebComponent({
+ rootComponent: App,
+ elementName: 'my-web-component',
+ plugins: pluginsWrapper,
+ cssFrameworkStyles: style,
+ VueDefineCustomElement,
+ h,
+ createApp,
+ getCurrentInstance,
+ disableStyleRemoval: false,
+ });
+ ```
diff --git a/package.json b/package.json
index b84371b..859b008 100644
--- a/package.json
+++ b/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",
diff --git a/package/package.json b/package/package.json
index cdd00b0..f435bd4 100644
--- a/package/package.json
+++ b/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": {