Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

78
Views
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.

7 months ago · Santiago Gelvez
1 answers
Answer question

0

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

7 months ago · Santiago Gelvez Report
Answer question
Find remote jobs