I want to implement Apple Pay in my Vue 3 application, but I am getting this warning in the console even though I added it as a custom element in the vue.config.js file.
Error Message
[Vue warn]: Failed to resolve component: apple-pay-button
If this is a native custom element, make sure to exclude it from component resolution
via compilerOptions.isCustomElement.
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack: (config) => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compilerOptions = {
...options.compilerOptions,
isCustomElement: (tag) => tag === 'apple-pay-button'
};
return options;
});
}
})
App.vue
<template>
<div>
<apple-pay-button
@click="payWithApplePay"
buttonstyle="black"
type="plain"
locale="en-US"
></apple-pay-button>
</div>
</template>
Can someone please help me figure this out?
