Vue QR Code Component

Common errors

• [Vue warn]: Unknown custom element: <vue-qrcode> - did you register the component correctly?

  cause The `VueQrcode` component was used in a template but was not properly registered with Vue, either locally within the parent component or globally.
  fix Ensure `VueQrcode` is imported and added to the `components` option of your Vue component, e.g., `components: { VueQrcode }`. For global registration in Vue 3, use `app.component('VueQrcode', VueQrcode)`.

• TypeError: Cannot read properties of undefined (reading 'create') (or similar error originating from 'qrcode' module)

  cause The `qrcode` peer dependency, which `vue-qrcode` relies on for core functionality, is either not installed or an incompatible version is present in your project.
  fix Install the required `qrcode` package: `npm install qrcode` or `yarn add qrcode`. Verify its version meets the `vue-qrcode` peer dependency requirement.

• Property 'value' is missing in type '{ ... }' but required in type 'VueQrcodeProps'. (TypeScript error)

  cause When using TypeScript, the `value` prop for the `VueQrcode` component is mandatory and was not provided in the template.
  fix Always provide the `value` prop to the `<vue-qrcode>` component, as it defines the data to be encoded. Example: `<vue-qrcode :value="myQrCodeData" />`.

• Module not found: Error: Can't resolve 'vue-qrcode' (or 'require() of ES Module ... is not supported')

  cause Your build setup or Node.js environment is attempting to load `vue-qrcode` as a CommonJS module, but it's primarily designed for ESM, especially in newer versions.
  fix Ensure your bundler is configured to handle ESM modules. If in Node.js, confirm your project's `package.json` has `"type": "module"` if you are using ESM syntax, or consider dynamic `import()` for CJS contexts.

Warnings

• breaking Version 2.0.0 of `vue-qrcode` introduced a breaking change by raising the minimum required Vue version to 2.7.0 or 3.0.0+. Projects using older Vue versions will need to upgrade Vue or remain on `vue-qrcode` v1.x.
  Fix: Upgrade your Vue project to Vue 2.7.0+ or Vue 3.0.0+. Alternatively, use `vue-qrcode` version 1.x if stuck on older Vue versions.
• breaking Starting from version 2.1.0, `vue-qrcode` upgraded its internal `qrcode` dependency to v1.5.0+. This update might introduce subtle rendering changes or expose new features/deprecations from the underlying `qrcode` library that could affect existing implementations.
  Fix: If upgrading from `vue-qrcode` versions older than 2.1.0, review the `qrcode` library's changelog for any breaking changes or behavior modifications that might impact your QR code generation.
• gotcha The `qrcode` library is a mandatory peer dependency. If it is not installed in your project, or an incompatible version is present, `vue-qrcode` will likely fail at runtime or during the build process with errors related to missing `qrcode` modules.
  Fix: Ensure both `vue` (matching the peer dependency range) and `qrcode` (`^1.0.0`) are explicitly installed in your project's `dependencies` or `devDependencies` using `npm install vue qrcode` or `yarn add vue qrcode`.
• gotcha As of `vue-qrcode` v2.2.1, ESM entries were added to the `package.json`. While this generally improves compatibility with modern bundlers and environments (like Vite), ensure your project's build configuration correctly handles ESM imports. In some older or mixed CJS/ESM setups, this could lead to module resolution issues.
  Fix: Verify that your bundler (e.g., Webpack, Rollup, Vite) is configured to correctly process ESM imports. For Node.js environments, consider setting `"type": "module"` in your `package.json` for files using ESM syntax.

Install

• npm install vue-qrcode npm
• yarn add vue-qrcode yarn
• pnpm add vue-qrcode pnpm

Imports

• VueQrcode
  wrong:

  import { VueQrcode } from 'vue-qrcode'

  correct:

  import VueQrcode from 'vue-qrcode'

  The primary component is exported as a default export, not a named export.
• VueQrcode
  wrong:

  const VueQrcode = require('vue-qrcode')

  correct:

  import VueQrcode from 'vue-qrcode'

  While recent versions (>=2.2.1) added ESM entries, consistent usage with modern Vue projects typically favors ESM imports. Direct CommonJS `require` might work in some bundler configurations but is less idiomatic and potentially less tree-shakeable.
• QRCodeSegment

  import type { QRCodeSegment } from 'vue-qrcode'

  A TypeScript type export available since v2.2.2 for advanced usage, allowing explicit typing of QR code segment data.

Quickstart

This quickstart demonstrates how to integrate the VueQrcode component into a Vue SFC, bind a value, pass options, and capture the generated data URL via the `change` event.

<template>
  <vue-qrcode
    value="https://www.1stg.me"
    :options="{ errorCorrectionLevel: 'H' }"
    @change="onDataUrlChange"
  />
</template>
<script>
import VueQrcode from 'vue-qrcode'

export default {
  data() {
    return {
      dataUrl: null,
      qrValue: 'https://www.example.com/qr-data'
    }
  },
  components: {
    VueQrcode,
  },
  methods: {
    onDataUrlChange(dataUrl) {
      console.log('Generated Data URL:', dataUrl)
      this.dataUrl = dataUrl
    },
    updateQrValue() {
      this.qrValue = `https://new-data.com/${Date.now()}`
    }
  },
  mounted() {
    // Simulate updating QR code value after some time
    setTimeout(this.updateQrValue, 5000)
  }
}
</script>