Nuxt Integration

[melliott03]

Has anyone used this with Nuxt?

[matheusmurden]

I'm trying to use this with Nuxt importing it as a plugin in nuxt.config.js and having no success at all... Would be nice if there were any Docs explaining how to use the component...

[melliott03]

Here's how I got this to work with Nuxt. Hopefully, I don't leave anything out and that this is helpful for someone.

1) Install pre-processors via https://nuxtjs.org/faq/pre-processors/ npm install --save-dev pug@2.0.3 pug-plain-loader coffeescript coffee-loader node-sass sass-loader 1 a) Add the following files to the top level of your components folder (Files found here: https://github.com/iliojunior/vuetify-credit-card/tree/master/src/components)

Card.vue CardService.js DefaultOptionsHelper.js

1 b) Add a folder called stylus at the same level as your component folder and fill it with these files and folders found here (https://github.com/iliojunior/vuetify-credit-card/tree/master/src/stylus)

browsers
cards
logos
card.styl
mixins.styl

2) Create a file in your plugin folder and call it Card.js then fill it with this code:

import Vue from "vue";
import Card from '@/components/Card'
Vue.component('Card', Card)

3) Import the newly created plugin in your nuxt.config.js as follows

plugins: [
     { src: '~/plugins/Card', ssr: false }
]

4) Add this to your template component

<template>
              <card v-model="cardDetail" :invert-card.sync="invertedCard" format-data="format-data"></card>
 </template>
<script>
const defaultCreditCardData = {
  number: "5145607790954405",
  name: "Name of Mastercard",
  expiry: "122019",
  cvc: "123"
}

export default {
    data() {
    return {
      cardDetail: defaultCreditCardData,
      invertedCard: false,
          }
          }
}

Note: If you have errors in the .styl files you may need to run the stylus code through a stylus validator to find the error or convert your stylus to css (and back again to stylus).