Vue 3 How to get rendered html element from a component?

Question

This is my component name LayerComponent (dummy).

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

I need the render DOM element in another component's mounted hook for a third-party library. and also need access the store.

In Vue 2 I got rendered dom by this way.

    import Vue from "vue";
    import LayerComponentfrom "./LayerComponent";


  ...other code
  ........
  mounted() {

    const lsComponent = Vue.extend(LayerComponent)
    const domElement= new lsComponent({
      store: this.$store,
    }).$mount();

   let htmlElement = domElement.$el;
//Now I can use this element in vanilla JavaScript.
   }

In Vue 2 this works very fine.

But how do I do the same thing in Vue 3?

I have tried this way:

    const lsApp = createApp(LayerComponent);
    lsApp.use(this.$store);

but the store is not working.

Note: I am using VueX 4.

Thanks in advance.

TrippleN · Accepted Answer · 2022-07-18 09:29:39Z

1

The parameter pass to app.use() must a Vue plugin so I think you should export store instance export const store = createStore(options); to pass as parameter in expression lsApp.use(store);

edited Jul 18, 2022 at 9:29

answered Jul 18, 2022 at 9:20

TrippleN

1545 bronze badges

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

2 Comments

Sharful Islam Over a year ago

I have already imported the store. This createApp(LayerComponent) is running in another component's mounted hook.

TrippleN Over a year ago

The code above you are using $store is different with store using createStore api

Collectives™ on Stack Overflow

Vue 3 How to get rendered html element from a component?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related