How to use vue router and vuex inside custom element from root?

Question

I have project with nested custom elements. Now I need to vuex & vue router. How I can use this packages from root custom element and then use in all child custom elements?

Currently I tried only use vuex inside each component like this:

<script>
import store from './store';

export default {
  setup() {
    const state = store.state;

    return { state };
  },
};
</script>

Here is demo project with nested custom elements

Here is my main.js file code:

import { defineCustomElement } from "./defineCustomElementWithStyles";
import App from "./App.ce.vue";

customElements.define("app-root", defineCustomElement(App));

tony19 · Accepted Answer · 2022-05-10 21:42:42Z

24

Vue plugins require the app instance, which is not defined for components created from defineCustomElement(). As a workaround, you can install the plugins on a temporary app instance, and then copy the resulting context over to the actual app, as seen in this utility (which we'll use later):

// defineCustomElementWithStyles.js
import { defineCustomElement as VueDefineCustomElement, h, createApp, getCurrentInstance } from 'vue'

export const defineCustomElement = (component, { plugins = [] } = {}) =>
  VueDefineCustomElement({
    render: () => h(component),
    setup() {
      const app = createApp()

      // install plugins
      plugins.forEach(app.use)

      const inst = getCurrentInstance()
      Object.assign(inst.appContext, app._context)
      Object.assign(inst.provides, app._context.provides)
    },
  })

Use the defineCustomElement() above instead of the one from vue:

// main.js
import { defineCustomElement } from './defineCustomElementWithStyles'
import App from './App.ce.vue'
import store from './store'
import router from './router'

customElements.define(
  'app-root',
  defineCustomElement(App, {
    plugins: [store, router],
  })
)

demo

edited May 10, 2022 at 21:42

answered Nov 3, 2021 at 6:02

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

acme Over a year ago

Has someone managed to type hint this properly with TS? I'm currently struggling with this.

lando Over a year ago

same here, besides that it works fine. @acme, did you make it work?

amir tbi Over a year ago

How about using Vuetify? Is it possible to use vuetify inside a custom web component?

amir tbi Over a year ago

I've included vuetify as you explained, but the custom theme of vuetify, does not implement on vuetify components!

tony19 Over a year ago

@amirtbi That's because Vuetify attaches styles directly to the root document instead of using Vue's style support. You can try the workarounds in the linked issue.

|

Razi91 · Accepted Answer · 2022-07-18 09:41:32Z

8

Just a little fix for tony19's solution:

export const defineCustomElementWrapped = (component, { plugins = [] } = {}) =>
  defineCustomElement({
    styles: component.styles, // <- this
    render: () => h(component),
    setup() {
      const app = createApp()

      // install plugins
      plugins.forEach(app.use)

      const inst = getCurrentInstance()
      Object.assign(inst.appContext, app._context)
      Object.assign(inst.provides, app._context.provides)
    },
  })

and then

customElements.define(
  'app-root',
  defineCustomElementWrapped(App, {
    plugins: [store, router],
  })
)

This will also include styles exported by components

(also I don't like shadowing original function names if you are changing their behaviors, so I renamed it)

Might be also required:

    styles: component.styles.map((style) => {
      return style
        .replace(":root", ":host") // <- rename :root values to :host
        .replace("body {", "#my-app {"); // <- in case of frameworks like bootstrap that styles directly body
    }),

edited Jul 18, 2022 at 9:41

answered Jul 18, 2022 at 8:12

Razi91

1012 silver badges5 bronze badges

1 Comment

Bais Over a year ago

I like your answer. To get it work, I had to import the entiry vue im my web component-<styles>. Yet I am struggeling to strip away all unnessary CSS from styles. do you have any idea to accomplish that?

Moritz Ringler · Accepted Answer · 2023-11-30 17:19:25Z

1

Just a small adjustments to the great answers: when you need props, emits or styles, it might be easier to destructure the component instead of wrapping it:

const defineCustomElement = (component, { plugins = [] } = {}) =>
  VueDefineCustomElement({
    ...component, // <---- use all props from the original component (except setup)
    setup(...args) {
      const app = createApp({})
      plugins.forEach(app.use)
      const instance = getCurrentInstance()
      Object.assign(instance.appContext, app._context)
      Object.assign(instance.provides, app._context.provides)

      return component.setup?.(...args) // <---- run initial setup if exists
    },
  })

answered Nov 30, 2023 at 17:19

Moritz Ringler

16.4k10 gold badges29 silver badges45 bronze badges

Collectives™ on Stack Overflow

How to use vue router and vuex inside custom element from root?

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related