Vue-router and vue-stripe-elements-plus issue: Can only create one Element of type card

Posted 5 months ago by Charrua

Hi, I'm building a SPA with Vue, two pages are using the <Card> component from vue-stripe-elements-plus.

The views that load the <Card> component are /gala and /seminars.

The problem is when I change from one view to the other, the <Card> component seems not to render again and an error is shown in console:

vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in beforeMount hook: "IntegrationError: Can only create one Element of type card."

Example, I load /gala and the <Card> component renders, but if I change to /seminars is not rendered and errors are shown. If I reload /seminars the component is rendered and if I change to /gala errors are shown again.

I have discovered something interesting, if I click on another url, for example /home in between of this two routes, the error is not shown and the <Card> component is rendered without issues.

My routes are:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'


export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
      path: '/',
      name: 'home',
      component: Home
      path: '/gala',
      name: 'gala',
      component: () => import(/* webpackChunkName: "about" */ './views/Gala.vue')
      path: '/seminars',
      name: 'seminars',
      component: () => import(/* webpackChunkName: "about" */ './views/Seminars.vue')

Maybe I'm missing something? Maybe I have to destroy the component on page change?

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.