[Bug] On Vue 3 + Vite no show brand image #51
Description
Describe the bug
On Vue 3 + Vite no show brand image
To Reproduce
Use on Vue 3 with Vite
Expected behavior
Show correctly the brand image
Screenshots
Environment:
{
"name": "my-project",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "run-p type-check build-only",
"preview": "vite preview --port 4173",
"build-only": "vite build",
"type-check": "vue-tsc --noEmit"
},
"dependencies": {
"@popperjs/core": "^2.11.6",
"@vue-flow/additional-components": "^1.1.0",
"@vue-flow/core": "^1.1.1",
"axios": "^1.1.3",
"bootstrap": "^5.2.2",
"chart.js": "^3.9.1",
"maska": "^1.5.0",
"vue": "^3.2.38",
"vue-chartjs": "^4.1.2",
"vue-paycard": "^0.7.0",
"vue-recaptcha-v3": "^2.0.1",
"vue-router": "^4.1.5",
"vue-toastification": "^2.0.0-rc.5",
"vue3-ace-editor": "^2.2.2",
"vue3-easy-data-table": "^1.5.7",
"vue3-google-login": "^2.0.12"
},
"devDependencies": {
"@types/bootstrap": "^5.2.5",
"@types/node": "^16.11.56",
"@vitejs/plugin-vue": "^3.0.3",
"@vue/tsconfig": "^0.1.3",
"npm-run-all": "^4.1.5",
"typescript": "~4.7.4",
"vite": "^3.0.9",
"vue-tsc": "^0.40.7"
}
}
Code
<template>
<vue-paycard :value-fields="valueFieldsCard" :has-random-backgrounds="false" />
<div class="col-12 mt-5">
<div class="form-floating mb-3">
<input type="text" class="form-control" placeholder="0000 0000 0000 0000"
v-model="valueFieldsCard.cardNumber" data-card-field v-maska="'#### #### #### ####'">
<label for="floatingInput">Card Number</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" placeholder="Your Name" v-model="valueFieldsCard.cardName"
data-card-field>
<label for="floatingPassword">Name</label>
</div>
<div class="form-floating mb-3">
<input type="number" class="form-control" placeholder="Month" v-model="valueFieldsCard.cardMonth"
data-card-field v-maska="'##'">
<label for="floatingPassword">Expire Month. Exp: 02</label>
</div>
<div class="form-floating mb-3">
<input type="number" class="form-control" placeholder="Year" v-model="valueFieldsCard.cardYear"
data-card-field v-maska="'####'">
<label for="floatingPassword">Expire Year. Exp: 2022</label>
</div>
<div class="form-floating mb-3">
<input type="number" class="form-control" placeholder="CVC" v-model="valueFieldsCard.cardCvv"
id="v-card-cvv" data-card-field v-maska="'###'">
<label for="floatingPassword">CVC</label>
</div>
</div>
</template>
<script setup lang="ts">
import { ref} from 'vue'
var valueFieldsCard = ref({
cardName: '',
cardNumber: '',
cardMonth: '',
cardYear: '',
cardCvv: '',
})
</script>