Building a Dynamic QR Code Generator with Vue.js

Why Dynamic QR Codes?

Unlike static QR codes, dynamic QR codes offer flexibility in changing the shape, color, and information of the image without generating a new code. This makes them ideal for brands that want to maintain their identity while using QR codes for marketing or event management purposes.

Prerequisites

• A working knowledge of basic JavaScript
• Visual Studio Code or a terminal and code editor available
• Node or Yarn for package installation

Setting up the Vue Project

mkdir vue-qr-code-generator
cd vue-qr-code-generator
npm install -g @vue/cli
vue create my-project

Next, we’ll install the @chenfengyuan/vue-qrcode package, which will help us generate QR codes.

npm install @chenfengyuan/vue-qrcode

Creating the QR Code Component

Create a new file called DisplayArea.vue. This component will be responsible for displaying the QR code.

<template>
  <div>
    <qrcode-vue :value="value" :size="size" :level="level" />
  </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue'

export default {
  components: { QrcodeVue },
  data() {
    return {
      value: '',
      size: 200,
      level: 'H'
    }
  }
}
</script>

Adding User Input

Create a new file called ContentOne.vue and add the following code:

<template>
  <div>
    <input v-model="value" type="text" placeholder="Enter value" />
    <button @click="updateValue">Update</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  },
  methods: {
    updateValue() {
      this.$emit('update:value', this.value)
    }
  }
}
</script>

Customizing the QR Code

Create a new file called ContentTwo.vue and add the following code:

<template>
  <div>
    <select v-model="level" @change="updateLevel">
      <option value="L">Low</option>
      <option value="M">Medium</option>
      <option value="Q">Quartile</option>
      <option value="H">High</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      level: 'H'
    }
  },
  methods: {
    updateLevel() {
      this.$emit('update:level', this.level)
    }
  }
}
</script>

Adding the Logo Component

Create a new file called ContentThree.vue and add the following code:

<template>
  <div>
    <input type="file" @change="updateLogo" />
  </div>
</template>

<script>
export default {
  methods: {
    updateLogo(event) {
      this.$emit('update:logo', event.target.files[0])
    }
  }
}
</script>

Passing Data to the Parent Component

Update the ContentOne.vue, ContentTwo.vue, and ContentThree.vue files to emit events when the user input changes.

// ContentOne.vue
<template>
  <div>
    <input v-model="value" type="text" placeholder="Enter value" />
    <button @click="updateValue">Update</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  },
  methods: {
    updateValue() {
      this.$emit('update:value', this.value)
    }
  }
}
</script>

// ContentTwo.vue
<template>
  <div>
    <select v-model="level" @change="updateLevel">
      <option value="L">Low</option>
      <option value="M">Medium</option>
      <option value="Q">Quartile</option>
      <option value="H">High</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      level: 'H'
    }
  },
  methods: {
    updateLevel() {
      this.$emit('update:level', this.level)
    }
  }
}
</script>

// ContentThree.vue
<template>
  <div>
    <input type="file" @change="updateLogo" />
  </div>
</template>

<script>
export default {
  methods: {
    updateLogo(event) {
      this.$emit('update:logo', event.target.files[0])
    }
  }
}
</script>

Creating the Parent Component

Create a new file called ParentComponent.vue and add the following code:

<template>
  <div>
    <ContentOne @update:value="updateValue" />
    <ContentTwo @update:level="updateLevel" />
    <ContentThree @update:logo="updateLogo" />
    <DisplayArea :value="value" :level="level" :logo="logo" />
  </div>
</template>

<script>
import ContentOne from './ContentOne.vue'
import ContentTwo from './ContentTwo.vue'
import ContentThree from './ContentThree.vue'
import DisplayArea from './DisplayArea.vue'

export default {
  components: { ContentOne, ContentTwo, ContentThree, DisplayArea },
  data() {
    return {
      value: '',
      level: 'H',
      logo: null
    }
  },
  methods: {
    updateValue(value) {
      this.value = value
    },
    updateLevel(level) {
      this.level = level
    },
    updateLogo(logo) {
      this.logo = logo
    }
  }
}
</script>

Hosting on Netlify

1. Run the npm run build command to create a production-ready build of our application.
2. Create a new site on Netlify and select “Deploy manually” as the deployment method.
3. Drag and drop the dist folder into the Netlify dashboard to deploy our application.