@code-apron/vue-next

A Vue 3 component library for generating barcodes and QR codes.

Installation

npm install @code-apron/vue-next

Usage

<template>
  <!-- Basic usage -->
  <ad-barcode type="code128">12345678</ad-barcode>

  <!-- With custom properties -->
  <ad-barcode 
    type="qrcode" 
    full 
    color="#00ff00" 
    background="#000000"
  >
    Hello World
  </ad-barcode>
</template>

<script>
import { AdBarcode } from '@code-apron/vue-next';

export default {
  components: {
    AdBarcode
  }
}
</script>

Or install globally:

import { createApp } from 'vue';
import AdBarcode from '@code-apron/vue-next';

const app = createApp(App);
app.use(AdBarcode);
app.mount('#app');

Then use it anywhere in your app:

<template>
  <ad-barcode type="code128">12345678</ad-barcode>
</template>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | type | string | 'code128' | Barcode type (upc-a, upc-e, ean-13, ean-8, code128, code39, qrcode, data-matrix, pdf417, aztec-code) | | children/default slot | string | required | The data to encode | | full | boolean | false | If true, fills the parent container | | width | number | undefined | Manual width | | height | number | undefined | Manual height | | color | string | 'black' | Foreground color | | background | string | 'white' | Background color |

Supported Types

Barcodes

• upc-a
• upc-e
• ean-13
• ean-8
• code128
• code39

2D Codes

• qrcode
• data-matrix
• pdf417
• aztec-code