npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-qrcode-dynamic

v3.0.3

Published

Creating a qrcode along with logo on Vue simply

Downloads

11

Readme

Dynamic QRCode on Vue

This package is developed thanks to qrcode.vue package.

Sample Image

Screenshot from 2023-01-16 10-43-47

The result of this component based on your data will be something like above.

:cd: Project setup

npm install vue-qrcode-dynamic

Notice: Install the version 2 of this package if you use Vue 2. npm i vue-qrcode-dynamic@2

Notice: Install the version 3 of this package if you use Vue 3. npm i vue-qrcode-dynamic@3

import globally

//On Vue 2
import Vue from "vue";
import QRCode from "vue-qrcode-dynamic";

Vue.component("QRCode", QRCode);

    
//On Vue 3
import { createApp } from "vue";
import App from "./App.vue";
import QRCode from "vue-qrcode-dynamic";

const app = createApp(App);
app.component("QRCode", QRCode);

You can call that on Vue2 or Vue3 according to the above commands. I have named this component to QRCode, you can change it any name.

Notice: Since we usually use QRCode on 1 component or a few components, it is better to call that locally, which is stated below.

These above commands must be written in the main.js file.

import locally

import QRCode from "vue-qrcode-dynamic";

export default {
  components: { QRCode },
  ...
}

You can also define and use this component locally.

call in the complete HTML format

    <QRCode
      value="Hello World"
      level="H"
      :QRSize="194"
      QRBackgroundColor="white"
      :logoImg="require('@/assets/logo.png')"
      :logoSize="47"
      logoBackgroundColor="white"
    />

Notice: All props are optional, but value, based on your demand. If you put no props and write <QRCode value="Hello World" />, the qrcode will be displayed with the value of Hello World, and the default size of 200*200 px.

Component props

value

  • Type: string
  • Default: "Hello World"

The value content of qrcode. You can put static or dynamic content.

level

  • Type: string
  • Default: H

qrcode Error correction level (one of 'L', 'M', 'Q', 'H'). Know more, wikipedia: QR_code

If you use logoBackgroundColor props, I recommend to use level:H . Because you might deal with some issues to read the qrcode when you use others levels when you have a big logo with logoBackgroundColor props.

QRSize

  • Type: number
  • Default: 200

The pixel size of qrcode element. Its width and height will be the same size.

QRBackgroundColor

  • Type: string
  • Default: transparent

The background color of qrcode. You can specify any color, like "white" even hash type, like "#ffffff".

logoImg

  • Type: string
  • Default: ""

The image of middle of the qrcode. If you want to put a logo or specific photo in the middle of qrcode, you can put it static or dynamic by specifying its address.

Notice: If the logo doesn't get loaded during 5 seconds after loading the page, or appeared like broken image, the logo won't be displayed at all.

logoSize

  • Type: number
  • Default: 30

The pixel size of logo element. Its width and height will be the same size. Considering, the max size of the logo will be at most 1/3 of the QRCode size to make the qrcode readable. In other words, if you put :QRSize="180" and :logoSize="100", the max logo size will be set automatically on 60, due to stated reason.

logoBackgroundColor

  • Type: string
  • Default: transparent

The background color of logo. You can specify any color, like "white" even hash type, like "#ffffff". It will be set with a padding 2 pixel.

Contact Me

I hope these package will be useful for you. If you see any issue or concern in this case, please let me know through this email [email protected]. to get them fixed ASAP.