Adding external elements to Vue.js?

Question

I found many libraries that somehow marry an external library (and their DOM elements) with Vue.js. All of them seem to only add children to the DOM node managed by Vue.js.

I wrote Vue-Stripe-Elements to make it easier to use the new Stripe V3, but tried to set Stripes elements to the Vue component.

An obvious way would be a component .vuelike this:

<template>
</template>

<script>
export default {
  // could also be `mounted()`
  beforeMount () {
    const el = Stripe.elements.create('card')
    el.mount(this.$el)
  }
}
</script>

This will work if Stripe only adds children to the element it is mounted on, but it looks like Stripe is translating or replacing the given DOM node instead. The strip, of course, also does not support any VNodes.

- DOM node :

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

, , Vue.js , . , , ?

"" ?

.

Answer 1

Stripe Vuejs 2

refs DOM vuejs.

HTML

<div ref="cardElement"></div>

JS

mounted() {
    const stripe = Stripe('pk');
    const elements = stripe.elements();
    const card = elements.create('card');
    card.mount(this.$refs.cardElement);
}