![](\"./.github/logo.png\"){kind=logo}
\n \n \n Credit card component made with Vue.js (works with Vue 2 & 3)\n
\n\n[](https://www.npmjs.com/package/vue-paycard)\n[](https://github.com/guastallaigor/vue-paycard/actions)\n[](https://coveralls.io/github/guastallaigor/vue-paycard?branch=master)\n[](http://standardjs.com/)\n[](https://www.npmjs.com/package/vue-paycard)\n[](https://app.netlify.com/sites/vue-paycard/deploys)\n\n> This component is based on Vue Interactive Paycard. All the credits for the component (idea, design, images, core code) goes to it \n> This project only exports the Card component, **you** will need to create your own form\n\n## Reason\n\nThere are a few reasons for creating this project\n\nFirst of all, a few of us developers needed a good and well designed Vue.js lightweight zero dependencies credit card component with **only** the card, no form attached\n\nAlso, Vue Interactive Paycard isn't a Vue.js npm component that you can simply add it to your project, and it doesn't seem to be maintained\n\nSo this project is the Card component from there, but with some differences:\n\n1. This component is in npm, so you can simply install and start using it right away, with only Vue.js as a dependency;\n2. All the images were optimized and have their width exactly as they need;\n3. The name of some of the props were changed and some of the code was refactored;\n4. The prop `labels` was added, so we don't need any i18n library;\n5. This project has a development environment using [Storybook](https://storybook.js.org/docs/guides/guide-vue/), [Github Actions](https://github.com/features/actions), etc.\n\n## Storybook\n\nGo to https://vue-paycard.netlify.app\n\n> **Note**: The form inside is just an example, **you** will need to create yours or copy it from `tests/unit/form.vue`\n\n## How to install\n\n### npm\n\n```bash\n$ npm install vue-paycard --save\n```\n\n### yarn\n\n```bash\n$ yarn add vue-paycard\n```\n\n## Quick start\n\n### Vue.js\n\nYou can import in your `main.js` file\n\n```js\nimport Vue from \"vue\";\nimport VuePaycard from \"vue-paycard\";\n\nVue.use(VuePaycard);\n```\n\nFor Vue 3\n\n```js\nimport { createApp, h } from \"vue\";\nimport VuePaycard from \"vue-paycard\";\n\nconst app = createApp({\n render: () => h(App),\n});\n\napp.use(VuePaycard);\n\napp.mount(\"#app\");\n```\n\nOr locally in any component\n\n```js\nimport { VuePaycard } from \"vue-paycard\";\n// In v0.5+ you don't need the brackets above\n\nexport default {\n components: {\n VuePaycard,\n },\n};\n```\n\n### Nuxt.js\n\nYou can create a Nuxt.js plugin `vue-paycard.js`\n\n```js\nimport Vue from \"vue\";\nimport VuePaycard from \"vue-paycard\";\n\nVue.use(VuePaycard);\n```\n\nand then import it in your `nuxt.config.js` file\n\n```js\nplugins: [{ src: \"~/plugins/vue-paycard.js\", mode: \"client\" }];\n```\n\n## Basic usage\n\n```html\n\n