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": {