@helios-interactive/vue-nfc-reader

Vue NFC Reader

Vue Plugin to interface with the NFC Reader Server

This plugin requires the NFC Reader Server to be active. (nfc-reader-server-electron)

Installation

# install
npm i -S @helios-interactive/vue-nfc-reader

Usage

To use the CardReader component:

Register Plugin with Vue

import Vue from 'vue';
import NFCRead from '@helios-interactive/vue-nfc-reader';

Vue.use(NFCRead, { host: 'http://localhost', port: 3333 });

This will register the CardReader component with Vue and make it available for use in other components.

The host and port properties are used to set the host and port for the NFC Reader Server.

Use Within a Component

<template>
  <card-reader
    @ready="scannerReady"
    @error="scannerError"
    @uid="handleUid"
    @info="handleInfo"
  />
  <p>STATUS: {{ status }}</p>
  <p>UID: {{ uid }}</p>
  <p>INFO: {{ info }}</p>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      status: '[scanner status]',
      uid: '',
      info: '',
    };
  },
  methods: {
    scannerReady() {
      this.status = 'Ready to scan';
    },
    scannerError(error) {
      this.status = `Error: ${error.message}`;
    },
    handleUid(uid) {
      this.uid = uid;
    },
    handleInfo(data) {
      this.info = data;
    },
  },
};
</script>

The CardReader component emits 4 different events:

• ready: Event emitted when the app is connected to the server and scanner is ready to scan. Wait for this event to fire before prompting the user to scan.
• error: Event emitted when an error occurs. This could be a disconnection from the server, or a disconnection of the scanning device. Payload includes a javascript error with a message. NOTE: If an error occurs after the ready event has been fired, ready status should be revoked. ready will fire again if the error resolves itself.
• uid: Event emitted when a card is successfully scanned. Payload is the UID.
• info: Event emitted whenever any activity is relayed to the plugin from the server. The payload includes all message info of communication between the plugin and the NFC Reader Server. Not necessary for production, but can be useful for debugging.