After exploring various libraries that integrate an external library and their DOM elements with Vue.js, I noticed that most of them only add child elements to the Vue-managed DOM node.
To simplify the use of the new Stripe V3 API, I developed Vue-Stripe-Elements. However, I faced challenges when trying to mount Stripe elements to the Vue component.
The typical approach would involve using a `.vue` component like this:
<template>
</template>
<script>
export default {
// could also be `mounted()`
beforeMount () {
const el = Stripe.elements.create('card')
el.mount(this.$el)
}
}
</script>
However, it appears that Stripe doesn't just add children to the mounted element, but transcludes or replaces the DOM node altogether. Additionally, Stripe does not support any `VNode`s.
To address this issue, my current solution involves creating a real DOM node and appending it as a child:
<template>
</template>
<script>
export default {
mounted () {
const dom_node = document.createElement('div')
const el = Stripe.elements.create('card')
el.mount(dom_node)
this.$el.appendChild(el)
}
}
</script>
This workaround functions as intended, but it feels like I am working against Vue.js and may inadvertently create unexpected side effects. Could there be a more optimal way to handle this?
Is there a preferred method recommended by Vue.js for addressing this issue?
Any insights on this matter would be greatly appreciated. Thank you!