diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3a8069e..c42d88e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
+## [1.4.0] - 25.01.2024
+### Added
+- Added support for provide/inject
+- Fixed demo app
+- Added documentation for provide/inject
+
 ## [1.3.4] - 19.01.2024
 ### Fixed
 - Fixed WEBPACK 5 support example
diff --git a/demo-app-vite/src/main.ts b/demo-app-vite/src/main.ts
index 8e1f721..c9d28b9 100644
--- a/demo-app-vite/src/main.ts
+++ b/demo-app-vite/src/main.ts
@@ -7,8 +7,8 @@ import style from './style.css?inline'
 import { pluginsWrapper } from './plugins'
 
 import { defineCustomElement as VueDefineCustomElement, h, createApp, getCurrentInstance } from 'vue'
-import { createWebComponent } from '../../package/index.js'
-// import { createWebComponent } from 'vue-web-component-wrapper'
+// import { createWebComponent } from '../../package/index.js'
+import { createWebComponent } from 'vue-web-component-wrapper'
 
 
 createWebComponent({
diff --git a/demo-app-webpack/src/main.js b/demo-app-webpack/src/main.js
index 6d9e53a..81b5b5b 100644
--- a/demo-app-webpack/src/main.js
+++ b/demo-app-webpack/src/main.js
@@ -7,7 +7,9 @@ import { createStore } from 'vuex'
 import { defaultRoutes} from './main.routes.js'
 import { store } from './store/index.js'
 import { defineCustomElement as VueDefineCustomElement, h, createApp, getCurrentInstance } from 'vue';
-import { createWebComponent } from '../../package/index.js';
+// import { createWebComponent } from '../../package/index.js';
+import { createWebComponent } from 'vue-web-component-wrapper';
+
 
 const pluginsWrapper = {
   install(GivenVue) {
diff --git a/package.json b/package.json
index 2acfd20..ee7e327 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "vue-web-component-wrapper",
-    "version": "1.3.4",
+    "version": "1.4.0",
     "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/dist/vue-web-component-wrapper.es.js b/package/dist/vue-web-component-wrapper.es.js
index bc7fcf2..199aa14 100644
--- a/package/dist/vue-web-component-wrapper.es.js
+++ b/package/dist/vue-web-component-wrapper.es.js
@@ -11,16 +11,16 @@ const b = (e) => {
 function y(e) {
   return "on" + e.charAt(0).toUpperCase() + e.slice(1);
 }
-const S = ({
+const h = ({
   rootComponent: e,
-  plugins: i,
+  plugins: c,
   cssFrameworkStyles: l,
   VueDefineCustomElement: u,
-  h: o,
+  h: s,
   createApp: a,
-  getCurrentInstance: c,
+  getCurrentInstance: o,
   elementName: p,
-  disableRemoveStylesOnUnmount: m
+  disableRemoveStylesOnUnmount: _
 }) => u({
   styles: [l],
   props: {
@@ -29,66 +29,72 @@ const S = ({
     // v-model support
   },
   emits: e == null ? void 0 : e.emits,
-  setup(w) {
-    var v;
-    const _ = [...(e == null ? void 0 : e.emits) || [], "update:modelValue"], n = a();
-    n.component("app-root", e), n.mixin({
+  setup(f) {
+    var m;
+    const v = [...(e == null ? void 0 : e.emits) || [], "update:modelValue"], r = a();
+    if (r.component("app-root", e), e.provide) {
+      const t = typeof e.provide == "function" ? e.provide() : e.provide;
+      Object.keys(t).forEach((n) => {
+        r.provide(n, t[n]);
+      });
+    }
+    r.mixin({
       mounted() {
-        var r;
-        const t = (s) => {
-          s != null && s.length && (this.__style = document.createElement("style"), this.__style.innerText = s.join().replace(/\n/g, ""), b(this.$el).prepend(this.__style));
+        var n;
+        const t = (i) => {
+          i != null && i.length && (this.__style = document.createElement("style"), this.__style.innerText = i.join().replace(/\n/g, ""), b(this.$el).prepend(this.__style));
         };
-        if (t((r = this.$) == null ? void 0 : r.type.styles), this.$options.components)
-          for (const s of Object.values(this.$options.components))
-            t(s.styles);
+        if (t((n = this.$) == null ? void 0 : n.type.styles), this.$options.components)
+          for (const i of Object.values(this.$options.components))
+            t(i.styles);
       },
       unmounted() {
         var t;
-        m || (t = this.__style) == null || t.remove();
+        _ || (t = this.__style) == null || t.remove();
       }
-    }), n.use(i);
-    const d = c();
-    if (Object.assign(d.appContext, n._context), Object.assign(d.provides, n._context.provides), process.env.NODE_ENV === "development" && window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
+    }), r.use(c);
+    const d = o();
+    if (Object.assign(d.appContext, r._context), Object.assign(d.provides, r._context.provides), process.env.NODE_ENV === "development" && window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
       const t = document.querySelector(p);
-      n._container = t, n._instance = d;
-      const r = {
+      r._container = t, r._instance = d;
+      const n = {
         Comment: Symbol("v-cmt"),
         Fragment: Symbol("v-fgt"),
         Static: Symbol("v-stc"),
         Text: Symbol("v-txt")
       };
-      window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("app:init", n, n.version, r), window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = n;
+      window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("app:init", r, r.version, n), window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = r;
     }
-    const O = _ == null ? void 0 : _.reduce((t, r) => {
-      const s = y(r);
-      return t[s] = (E) => {
-        d.emit(r, E);
+    const w = v == null ? void 0 : v.reduce((t, n) => {
+      const i = y(n);
+      return t[i] = (E) => {
+        d.emit(n, E);
       }, t;
-    }, {}), f = (v = e == null ? void 0 : e.namedSlots) == null ? void 0 : v.reduce((t, r) => (t[r] = () => o("slot", { name: r }), t), {});
-    return () => o(
+    }, {}), O = (m = e == null ? void 0 : e.namedSlots) == null ? void 0 : m.reduce((t, n) => (t[n] = () => s("slot", { name: n }), t), {});
+    return () => s(
       e,
       {
-        ...w,
-        ...O
+        ...f,
+        ...w
       },
       {
-        default: () => o("slot"),
-        ...f
+        default: () => s("slot"),
+        ...O
       }
     );
   }
-}), h = ({
+}), S = ({
   elementName: e,
-  rootComponent: i,
+  rootComponent: c,
   plugins: l,
   cssFrameworkStyles: u,
-  VueDefineCustomElement: o,
+  VueDefineCustomElement: s,
   h: a,
-  createApp: c,
+  createApp: o,
   getCurrentInstance: p,
-  disableRemoveStylesOnUnmount: m
+  disableRemoveStylesOnUnmount: _
 }) => {
-  if (!i) {
+  if (!c) {
     console.warn("No root component provided. Please provide a root component to create a web component.");
     return;
   }
@@ -96,7 +102,7 @@ const S = ({
     console.warn("No element name provided. Please provide an element name to create a web component.");
     return;
   }
-  if (!o) {
+  if (!s) {
     console.warn(
       "No VueDefineCustomElement provided. Please provide a VueDefineCustomElement to create a web component."
     );
@@ -106,7 +112,7 @@ const S = ({
     console.warn("No h provided. Please provide an h to create a web component.");
     return;
   }
-  if (!c) {
+  if (!o) {
     console.warn("No createApp provided. Please provide a createApp to create a web component.");
     return;
   }
@@ -116,19 +122,19 @@ const S = ({
   }
   customElements.define(
     e,
-    S({
-      rootComponent: i,
+    h({
+      rootComponent: c,
       plugins: l,
       cssFrameworkStyles: u,
-      VueDefineCustomElement: o,
+      VueDefineCustomElement: s,
       h: a,
-      createApp: c,
+      createApp: o,
       getCurrentInstance: p,
       elementName: e,
-      disableRemoveStylesOnUnmount: m
+      disableRemoveStylesOnUnmount: _
     })
   );
 };
 export {
-  h as createWebComponent
+  S as createWebComponent
 };
diff --git a/package/dist/vue-web-component-wrapper.umd.js b/package/dist/vue-web-component-wrapper.umd.js
index a099cad..7fb0158 100644
--- a/package/dist/vue-web-component-wrapper.umd.js
+++ b/package/dist/vue-web-component-wrapper.umd.js
@@ -1 +1 @@
-(function(r,a){typeof exports=="object"&&typeof module<"u"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(r=typeof globalThis<"u"?globalThis:r||self,a(r.Vue3WebComponentWrapper={}))})(this,function(r){"use strict";const a=e=>{for(;(e==null?void 0:e.nodeType)!==1;){if(!e.parentElement)throw new Error("No parent element found, the rootComponent must be wrapped in a HTML element (e.g. <template><div> app content </div></template>)");e=e.parentElement}return e};function w(e){return"on"+e.charAt(0).toUpperCase()+e.slice(1)}const O=({rootComponent:e,plugins:c,cssFrameworkStyles:m,VueDefineCustomElement:_,h:s,createApp:p,getCurrentInstance:d,elementName:u,disableRemoveStylesOnUnmount:f})=>_({styles:[m],props:{...e.props,modelValue:{type:[String,Number,Boolean,Array,Object]}},emits:e==null?void 0:e.emits,setup(E){var b;const v=[...(e==null?void 0:e.emits)||[],"update:modelValue"],n=p();n.component("app-root",e),n.mixin({mounted(){var o;const t=i=>{i!=null&&i.length&&(this.__style=document.createElement("style"),this.__style.innerText=i.join().replace(/\n/g,""),a(this.$el).prepend(this.__style))};if(t((o=this.$)==null?void 0:o.type.styles),this.$options.components)for(const i of Object.values(this.$options.components))t(i.styles)},unmounted(){var t;f||(t=this.__style)==null||t.remove()}}),n.use(c);const l=d();if(Object.assign(l.appContext,n._context),Object.assign(l.provides,n._context.provides),process.env.NODE_ENV==="development"&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__){const t=document.querySelector(u);n._container=t,n._instance=l;const o={Comment:Symbol("v-cmt"),Fragment:Symbol("v-fgt"),Static:Symbol("v-stc"),Text:Symbol("v-txt")};window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("app:init",n,n.version,o),window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue=n}const h=v==null?void 0:v.reduce((t,o)=>{const i=w(o);return t[i]=V=>{l.emit(o,V)},t},{}),S=(b=e==null?void 0:e.namedSlots)==null?void 0:b.reduce((t,o)=>(t[o]=()=>s("slot",{name:o}),t),{});return()=>s(e,{...E,...h},{default:()=>s("slot"),...S})}}),y=({elementName:e,rootComponent:c,plugins:m,cssFrameworkStyles:_,VueDefineCustomElement:s,h:p,createApp:d,getCurrentInstance:u,disableRemoveStylesOnUnmount:f})=>{if(!c){console.warn("No root component provided. Please provide a root component to create a web component.");return}if(!e){console.warn("No element name provided. Please provide an element name to create a web component.");return}if(!s){console.warn("No VueDefineCustomElement provided. Please provide a VueDefineCustomElement to create a web component.");return}if(!p){console.warn("No h provided. Please provide an h to create a web component.");return}if(!d){console.warn("No createApp provided. Please provide a createApp to create a web component.");return}if(!u){console.warn("No getCurrentInstance provided. Please provide a getCurrentInstance to create a web component.");return}customElements.define(e,O({rootComponent:c,plugins:m,cssFrameworkStyles:_,VueDefineCustomElement:s,h:p,createApp:d,getCurrentInstance:u,elementName:e,disableRemoveStylesOnUnmount:f}))};r.createWebComponent=y,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
+(function(s,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(s=typeof globalThis<"u"?globalThis:s||self,c(s.Vue3WebComponentWrapper={}))})(this,function(s){"use strict";const c=e=>{for(;(e==null?void 0:e.nodeType)!==1;){if(!e.parentElement)throw new Error("No parent element found, the rootComponent must be wrapped in a HTML element (e.g. <template><div> app content </div></template>)");e=e.parentElement}return e};function O(e){return"on"+e.charAt(0).toUpperCase()+e.slice(1)}const w=({rootComponent:e,plugins:a,cssFrameworkStyles:f,VueDefineCustomElement:m,h:o,createApp:p,getCurrentInstance:d,elementName:u,disableRemoveStylesOnUnmount:v})=>m({styles:[f],props:{...e.props,modelValue:{type:[String,Number,Boolean,Array,Object]}},emits:e==null?void 0:e.emits,setup(E){var b;const _=[...(e==null?void 0:e.emits)||[],"update:modelValue"],i=p();if(i.component("app-root",e),e.provide){const t=typeof e.provide=="function"?e.provide():e.provide;Object.keys(t).forEach(n=>{i.provide(n,t[n])})}i.mixin({mounted(){var n;const t=r=>{r!=null&&r.length&&(this.__style=document.createElement("style"),this.__style.innerText=r.join().replace(/\n/g,""),c(this.$el).prepend(this.__style))};if(t((n=this.$)==null?void 0:n.type.styles),this.$options.components)for(const r of Object.values(this.$options.components))t(r.styles)},unmounted(){var t;v||(t=this.__style)==null||t.remove()}}),i.use(a);const l=d();if(Object.assign(l.appContext,i._context),Object.assign(l.provides,i._context.provides),process.env.NODE_ENV==="development"&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__){const t=document.querySelector(u);i._container=t,i._instance=l;const n={Comment:Symbol("v-cmt"),Fragment:Symbol("v-fgt"),Static:Symbol("v-stc"),Text:Symbol("v-txt")};window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("app:init",i,i.version,n),window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue=i}const h=_==null?void 0:_.reduce((t,n)=>{const r=O(n);return t[r]=V=>{l.emit(n,V)},t},{}),S=(b=e==null?void 0:e.namedSlots)==null?void 0:b.reduce((t,n)=>(t[n]=()=>o("slot",{name:n}),t),{});return()=>o(e,{...E,...h},{default:()=>o("slot"),...S})}}),y=({elementName:e,rootComponent:a,plugins:f,cssFrameworkStyles:m,VueDefineCustomElement:o,h:p,createApp:d,getCurrentInstance:u,disableRemoveStylesOnUnmount:v})=>{if(!a){console.warn("No root component provided. Please provide a root component to create a web component.");return}if(!e){console.warn("No element name provided. Please provide an element name to create a web component.");return}if(!o){console.warn("No VueDefineCustomElement provided. Please provide a VueDefineCustomElement to create a web component.");return}if(!p){console.warn("No h provided. Please provide an h to create a web component.");return}if(!d){console.warn("No createApp provided. Please provide a createApp to create a web component.");return}if(!u){console.warn("No getCurrentInstance provided. Please provide a getCurrentInstance to create a web component.");return}customElements.define(e,w({rootComponent:a,plugins:f,cssFrameworkStyles:m,VueDefineCustomElement:o,h:p,createApp:d,getCurrentInstance:u,elementName:e,disableRemoveStylesOnUnmount:v}))};s.createWebComponent=y,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
diff --git a/package/package.json b/package/package.json
index 7758e99..95e8c6e 100644
--- a/package/package.json
+++ b/package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-web-component-wrapper",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "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": {