Generate a shipping label barcode image in NuxtJS

Moronfolu Olufunke

Since the invention of the barcode some years back, its usage has grown in popularity from being used in mini-marts for small-scale inventory to large-scale commercial purposes at shipping companies.

A barcode is a strict square and rectangular box containing machine-readable vertical lines of different thicknesses. Numbers always come with Barcodes, and on scanning, they provide information about the products to which they are attached.

In this article, we will be learning how to generate downloadable shipping label barcodes in Nuxt.js using the CODE128 barcodes.

Sandbox

We can find the completed project on CodeSandbox. Fork it and run the code.

## Github

Check out the complete source code here.

Prerequisite

Understanding this article requires the following:

  • Installation of Node.js and its package manager, npm.
  • Basic knowledge of JavaScript.
  • Familiarity with Nuxt.js

Installing Dependencies

We use the npx create-nuxt-app <project-name> to create a new Nuxt project. The process of scaffolding the project should bring a list of options which should look like this:

After successful project creation, we can start our application by running the following command.

1cd <project name>
2 npm run dev

Nuxt will, in turn, start a hot-reloading development environment which is accessible by default at http://localhost:3000.

Generating Random Numbers

As said earlier, barcodes come with numbers. The width of the bars depicts numbers ranging from 0 to 1, and the bars sequence connotes numbers from 0 to 9. We will randomly generate numbers that we will be using to render our barcodes for the shipping labels. To generate random numbers, navigate into the pages/index in our Nuxt application and add the code below:

1<template>
2 <button class="bg-white br3 pa3 ba dib tc" @click="generateRandomNumber"> Generate number: <span class="bg-washed-red br3 pa2">{{number}}</span></button>
3 </template>
4
5 <script>
6 export default {
7 data() {
8 return {
9 number: '111111',
10 max: 100000000,
11 min: 1000,
12 }
13 },
14 methods: {
15 generateRandomNumber () {
16 this.number = Math.floor(Math.random()*(this.max-this.min+1)+this.min);
17 },
18 }
19 }
20 </script>

When we fire the generateRandomNumber() method in the above code block, the Math.random() function returns numbers lower than 1; on pairing the result with Math.floor() returns random integers. The random number generated ranges between the values of the minimum and max variables assigned to the number variable.

Generating barcodes

After generating numbers, the next step is to attach the number to a barcode. We will employ the power of the Vue barcode package created by Fengyuan chen. The barcode package generates barcodes based on the options we define.

To use the package in any Nuxt application, we will install it like so:

1npm install @chenfengyuan/vue-barcode@1

After installation, we will import the component into our project. Update the pages/index.vue with the following:

1<template>
2 <!-- code for generateRandomNumber() method -->
3 <VueBarcode ref="barcode" :value="number" tag="img" format="CODE128" :options="options" class="db center tc mv3"></VueBarcode>
4 </template>
5 <script>
6 import VueBarcode from '@chenfengyuan/vue-barcode';
7 export default {
8 components: {
9 VueBarcode
10 },
11 data() {
12 return {
13 number: '111111',
14 max: 100000000,
15 min: 1000,
16 tag: 'img',
17 options: {
18 width: 2.5,
19 height: 150,
20 },
21 }
22 },
23 methods:{
24 generateRandomNumber () {
25 this.number = Math.floor(Math.random()*(this.max-this.min+1)+this.min);
26 },
27 }
28 };
29 </script>

In the above code block, we imported our bar code package then initialized it as a component for usage. The barcode component has several attributes and options that enable it to function as expected. Some of these options are:

  • :value: a v-bind that takes in the value of the number variable.
  • tag: the barcode's element tag, which shows the downloadable barcode format. These formats include img, SVG, and canvas.
  • :options: the options contain many options like height and width, which are both expressed in number, background, font e.t.c
  • format: There are different barcode formats for which the CODE128 is one. The CODE128 is famous for its ability to encode a large amount of data. This helpful attribute is due to its acceptance of any of the 128 ASCII characters.

When we click on the generateRandomNumber() method, we get a random number that generates a barcode alongside.

Downloading the barcode

At the successful generation of the barcodes, we should be able to download the generated barcodes for use. We will add the code below as a continuation in our pages/index.vue.

1<template>
2 <a class="dib bg-green pa3 br3 white" :href="link" download="ship label barcode">Download Barcode</a>
3 </template>
4 <script>
5 export default {
6 data() {
7 return {
8 link: '',
9 }
10 },
11 methods:{
12 generateRandomNumber () {
13 this.number = Math.floor(Math.random()*(this.max-this.min+1)+this.min);
14 this.$nextTick(()=> {
15 this.link = this.$refs.barcode.$el.src
16 })
17 },
18 }
19 };
20 </script>

In the code block above, we bind the link variable with the src value of the generated barcode. This link generates a downloadable image that we can use later on.

At this point, our code in the Nuxt application should look like this:

1<template>
2 <div class="ph4 pv3 bg-washed-yellow vh-100">
3 <nav class="pa3 pa4-ns">
4 <a class="link dim black b f1-ns f3 tc db mb3 mb4-ns">Barcode Image Generator</a>
5 </nav>
6 <section class="center tc w-60-ns w-70">
7 <button class="bg-white br3 pa3 ba dib tc" @click="generateRandomNumber"> Generate number: <span class=" bg-washed-red br3 pa2">{{number}}</span></button>
8 <VueBarcode ref="barcode" :value="number" tag="img" format="CODE128" :options="options" class="db center tc mv3"></VueBarcode>
9 <a class="dib bg-green pa3 br3 white" :href="link" download="ship label barcode">Download Barcode</a>
10 </section>
11 </div>
12 </template>
13 <script>
14 import VueBarcode from '@chenfengyuan/vue-barcode';
15 export default {
16 components: {
17 VueBarcode
18 },
19 data() {
20 return {
21 number: '111111',
22 max: 100000000,
23 min: 1000,
24 tag: 'img',
25 link: '',
26 options: {
27 width: 2.5,
28 height: 150,
29 },
30 }
31 },
32 methods:{
33 generateRandomNumber () {
34 this.number = Math.floor(Math.random()*(this.max-this.min+1)+this.min);
35 this.$nextTick(()=> {
36 this.link = this.$refs.barcode.$el.src
37 })
38 },
39 }
40 };
41 </script>

While our application will look like the below in the browser:

Conclusion

This article goes through how to generate a shipping label barcode image in Nuxt.js. You can modify the interface to include other information included in shipping labels.

Resources

- JavaScript barcode generation library

Moronfolu Olufunke

Frontend Engineer | Tecnical Writer | Story Teller

Olufunke is a Frontend Engineer and technical writer who enjoys building stuff and writing about them.