CODEWITHSUNDEEP
javascriptvue.jsvuejs3
Sharful Islam
Sharful Islam

Reputation: 41

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

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.

Upvotes: 0

Views: 1241

Answers (1)

TrippleN
TrippleN

Reputation: 144

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);

Upvotes: 1

Related Questions