### Install qrcode-reader-vue3 Package

Source: https://github.com/gimanh/qr-code-vue3/blob/main/README.md

This command installs the qrcode-reader-vue3 package, a companion library for reading QR codes within Vue 3 applications.

```bash
npm install --save qrcode-reader-vue3
```

--------------------------------

### Install qr-code-generator-vue3 Package

Source: https://github.com/gimanh/qr-code-vue3/blob/main/README.md

This command installs the qr-code-generator-vue3 package, which is a Vue 3 component for generating QR codes with styling.

```bash
npm install qr-code-generator-vue3 --save
```

--------------------------------

### VQRCodeStyling Instance

Source: https://github.com/gimanh/qr-code-vue3/blob/main/README.md

This section details how to instantiate the VQRCodeStyling class and its available options for customizing QR code generation.

```APIDOC
## VQRCodeStyling Instance

### Description
Instantiate the VQRCodeStyling class to create and customize QR codes.

### Method
`new VQRCodeStyling(options)`

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **options** (object) - Required - Init object for QR code styling.

### Request Example
```json
{
  "options": {
    "width": 300,
    "height": 300,
    "download": false,
    "myclass": "",
    "imgclass": "",
    "downloadButton": "",
    "downloadOptions": {},
    "value": "",
    "image": "",
    "margin": 0,
    "qrOptions": {
      "typeNumber": 0,
      "mode": "Numeric",
      "errorCorrectionLevel": "Q"
    },
    "imageOptions": {
      "hideBackgroundDots": true,
      "imageSize": 0.4,
      "margin": 0,
      "crossOrigin": ""
    },
    "dotsOptions": {
      "color": "#000",
      "gradient": {},
      "type": "square"
    },
    "cornersSquareOptions": {
      "color": "",
      "gradient": {}
    },
    "backgroundOptions": {
      "color": "#fff",
      "gradient": {}
    }
  }
}
```

### Response
#### Success Response (200)
Returns an instance of `VQRCodeStyling`.

#### Response Example
```json
{
  "instance": "VQRCodeStyling"
}
```
```

--------------------------------

### VQRCodeStyling Methods

Source: https://github.com/gimanh/qr-code-vue3/blob/main/README.md

Provides methods for interacting with the QR code instance, such as appending it to a container, updating its options, and downloading it.

```APIDOC
## VQRCodeStyling Methods

### Description
Methods for managing the QR code component.

### `VQRCodeStyling.append(container)`
Appends the QR code to a specified DOM element.

#### Parameters
- **container** (DOM element) - Required - This container will be used for appending of the QR code

### `VQRCodeStyling.update(options)`
Updates the QR code with new options.

#### Parameters
- **options** (object) - Required - The same options as for initialization

### `VQRCodeStyling.download(downloadOptions)`
Initiates the download of the QR code.

#### Parameters
- **downloadOptions** (object) - Optional - Options with extension and name of file

##### `downloadOptions` Structure
- **name** (string) - Optional - Default: 'qr' - Name of the downloaded file
- **extension** (string: 'png' | 'jpeg' | 'webp') - Optional - Default: 'png' - File extension
```

--------------------------------

### QR Code Styling Options

Source: https://github.com/gimanh/qr-code-vue3/blob/main/README.md

This section details the various options available for customizing the appearance of the QR code, including dot styles, corner styles, and background options.

```APIDOC
## QR Code Styling Options

### Description
Customization options for the QR code's appearance.

### Options

#### `options.cornersDotOptions`
- **color** (string) - Optional - Color of Corners Dot
- **gradient** (object) - Optional - Gradient of Corners Dot
- **type** (string: 'dot' | 'square') - Optional - Style of Corners Dot

#### `options.cornersSquareOptions`
- **color** (string) - Optional - Color of Corners Square
- **gradient** (object) - Optional - Gradient of Corners Square
- **type** (string: 'dot' | 'square' | 'extra-rounded') - Optional - Style of Corners Square

#### `options.dotsOptions`
- **color** (string) - Optional - Color of Dots
- **gradient** (object) - Optional - Gradient of Dots
- **type** (string: 'dot' | 'square') - Optional - Style of Dots

#### `options.backgroundOptions`
- **color** (string) - Optional - Color of Background
- **gradient** (object) - Optional - Gradient of Background

### Gradient Structure

#### `options.dotsOptions.gradient`, `options.backgroundOptions.gradient`, `options.cornersSquareOptions.gradient`, `options.cornersDotOptions.gradient`
- **type** (string: 'linear' | 'radial') - Optional - Default: "linear" - Type of gradient spread
- **rotation** (number) - Optional - Default: 0 - Rotation of gradient in radians (Math.PI === 180 degrees)
- **colorStops** (array of objects) - Optional - Gradient colors. Example `[{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }]`

#### Gradient ColorStops Structure (`options.<section>.gradient.colorStops[]`)
- **offset** (number: 0 - 1) - Optional - Position of color in gradient range
- **color** (string) - Optional - Color of stop in gradient range
```

--------------------------------

### Basic and Styled QR Code Generation in Vue 3

Source: https://github.com/gimanh/qr-code-vue3/blob/main/README.md

This Vue 3 component demonstrates how to use the QRCodeVue3 component for both basic and highly stylized QR code generation. It shows how to pass various props to customize the QR code's appearance, including size, error correction level, dot styles, and corner options. The component also includes functionality for downloading the generated QR code as a PNG image.

```html
<template>
  <div>
   <QRCodeVue3
          value="Simple QR code"
        />

   <QRCodeVue3
          :width="200"
          :height="200"
          value="https://scholtz.sk"
          :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
          :imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
          :dotsOptions="{
            type: 'dots',
            color: '#26249a',
            gradient: {
              type: 'linear',
              rotation: 0,
              colorStops: [
                { offset: 0, color: '#26249a' },
                { offset: 1, color: '#26249a' },
              ],
            }
          }"
          :backgroundOptions="{ color: '#ffffff' }"
          :cornersSquareOptions="{ type: 'dot', color: '#000000' }"
          :cornersDotOptions="{ type: undefined, color: '#000000' }"
          fileExt="png"
          :download="true"
          myclass="my-qur"
          imgclass="img-qr"
          downloadButton="my-button"
          :downloadOptions="{ name: 'vqr', extension: 'png' }"
        />
  </div>
</template>

<script>
import QRCodeVue3 from "qrcode-vue3";

export default {
  name: 'QRCodeVue3Example',
  components: {
    QRCodeVue3
  },
}
</script>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.