@qr-x/vue v1.1.1

Installation

npm install @qr-x/vue

Usage

You can also try QR-X in action here or follow the examples below.

Solid

<script>
import QRX from '@qr-x/vue'
</script>

<template>
  <QRX data="https://qr-x.devtrice.dev" color="#0284c7" />
</template>

Gradient

Linear Gradient

<script>
import QRX from '@qr-x/vue'
</script>

<template>
  <QRX
    data="https://qr-x.devtrice.dev"
    :gradient="{
      colors: ['#f97316', '#f59e0b', '#facc15'],
    }"
  />
</template>

Radial Gradient

<script>
import QRX from '@qr-x/vue'
</script>

<template>
  <QRX
    data="https://qr-x.devtrice.dev"
    :gradient="{
      type: 'radial',
      colors: ['#f97316', '#f59e0b', '#facc15'],
    }"
  />
</template>

Fill Image

<script>
import QRX from '@qr-x/vue'
</script>

<template>
  <QRX data="https://qr-x.devtrice.dev" fillImage="https://images.unsplash.com photo-1682687218608-5e2522b04673" />
</template>

Brand

Brand Image

<script>
  import QRX from '@qr-x/vue'
</script>

<QRX
  data="https://qr-x.devtrice.dev"
  brand={{ src: 'https://images.unsplash.com/photo-1682687218608-5e2522b04673', style: 'width: 4rem; height: 4rem' }}
/>

Brand Component

<script>
import QRX from '@qr-x/vue'
</script>

<QRX data="https://qr-x.devtrice.dev">
  <template v-slot:brand>
    <video
      src="https://videos.pexels.com/video-files/8333185/8333185-hd_1080_1080_30fps.mp4"
      :style="{ width: '2.5rem', height: '2.5rem', border: '2px solid white', borderRadius: '50%' }"
      muted
      autoplay
    />
  </template>
</QRX>

Props