{"id":27872,"date":"2022-04-06T02:26:38","date_gmt":"2022-04-06T02:26:38","guid":{"rendered":"http:\/\/generate-a-shipping-label-barcode-image-in-nuxtjs"},"modified":"2025-03-08T13:38:47","modified_gmt":"2025-03-08T21:38:47","slug":"generate-a-shipping-label-barcode-image-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/","title":{"rendered":"Generate a shipping label barcode image in NuxtJS"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>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.<\/p>\n<p>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.<\/p>\n<p>In this article, we will be learning how to generate downloadable shipping label barcodes in Nuxt.js using the <strong>CODE128<\/strong> barcodes.<\/p>\n<h2>Sandbox<\/h2>\n<p>We can find the completed project on <a href=\"https:\/\/codesandbox.io\/s\/shipping-label-barcode-image-6k2syq\">CodeSandbox<\/a>. Fork it and run the code.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/shipping-label-barcode-image-6k2syq?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"Generate a shipping label barcode image in NuxtJS\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><h2>Github<\/h2>\n<p>Check out the complete source code <a href=\"https:\/\/github.com\/MoeRayo\/shipping-label-barcode-image\">here<\/a>.<\/p>\n<h2>Prerequisite<\/h2>\n<p>Understanding this article requires the following:<\/p>\n<ul>\n<li>Installation of Node.js and its package manager, npm.<\/li>\n<li>Basic knowledge of JavaScript.<\/li>\n<li>Familiarity with Nuxt.js<\/li>\n<\/ul>\n<h2>Installing Dependencies<\/h2>\n<p>We use the <code>npx create-nuxt-app &lt;project-name&gt;<\/code> to create a new Nuxt project.\nThe process of scaffolding the project should bring a list of options which should look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_FA66FB11A2159385B86AC5C5FFC43D101742A182D0A52F96317F1A5AA34FF595_1647987937101_ksnip_20220322-232440.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"778\" height=\"283\"\/><\/p>\n<p>After successful project creation, we can start our application by running the following command.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    cd <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">project<\/span> <span class=\"hljs-attr\">name<\/span>&gt;<\/span>\n    npm run dev\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Nuxt will, in turn, start a hot-reloading development environment which is accessible by default at <a href=\"http:\/\/localhost:4000\">http:\/\/localhost:<\/a><a href=\"http:\/\/localhost:3000\">3000<\/a>.<\/p>\n<h2>Generating Random Numbers<\/h2>\n<p>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.\nWe will randomly generate numbers that we will be using to render our barcodes for the shipping labels.\nTo generate random numbers, navigate into the <code>pages\/index<\/code> in our Nuxt application and add the code below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"bg-white br3 pa3 ba dib tc\"<\/span> @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"generateRandomNumber\"<\/span>&gt;<\/span> Generate number: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"bg-washed-red br3 pa2\"<\/span>&gt;<\/span>{{number}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n    \n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n      data() {\n        <span class=\"hljs-keyword\">return<\/span> {\n          <span class=\"hljs-attr\">number<\/span>: <span class=\"hljs-string\">'111111'<\/span>,\n          <span class=\"hljs-attr\">max<\/span>: <span class=\"hljs-number\">100000000<\/span>,\n          <span class=\"hljs-attr\">min<\/span>: <span class=\"hljs-number\">1000<\/span>,\n        }\n      },\n      <span class=\"hljs-attr\">methods<\/span>: {\n        generateRandomNumber () {\n          <span class=\"hljs-keyword\">this<\/span>.number = <span class=\"hljs-built_in\">Math<\/span>.floor(<span class=\"hljs-built_in\">Math<\/span>.random()*(<span class=\"hljs-keyword\">this<\/span>.max-<span class=\"hljs-keyword\">this<\/span>.min+<span class=\"hljs-number\">1<\/span>)+<span class=\"hljs-keyword\">this<\/span>.min);\n        },\n      }\n    }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>When we fire the <code>generateRandomNumber()<\/code> method in the above code block, the <code>Math.random()<\/code> function returns numbers lower than 1; on pairing the result with <code>Math.floor()<\/code> returns random integers.\nThe random number generated ranges between the values of the minimum and max variables assigned to the <code>number<\/code> variable.<\/p>\n<h2>Generating barcodes<\/h2>\n<p>After generating numbers, the next step is to attach the number to a barcode. We will employ the power of the <strong>Vue barcode package<\/strong> created by <a href=\"https:\/\/github.com\/fengyuanchen\/vue-barcode\/tree\/v1\">Fengyuan chen<\/a>.\nThe barcode package generates barcodes based on the options we define.<\/p>\n<p>To use the package in any Nuxt application, we will install it like so:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\">    <span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">install<\/span> <span class=\"hljs-keyword\">@chenfengyuan<\/span>\/vue-barcode<span class=\"hljs-keyword\">@1<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>After installation, we will import the component into our project.\nUpdate the <code>pages\/index.vue<\/code> with the following:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n        <span class=\"hljs-comment\">&lt;!-- code for generateRandomNumber() method --&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">VueBarcode<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"barcode\"<\/span> <span class=\"hljs-attr\">:value<\/span>=<span class=\"hljs-string\">\"number\"<\/span> <span class=\"hljs-attr\">tag<\/span>=<span class=\"hljs-string\">\"img\"<\/span> <span class=\"hljs-attr\">format<\/span>=<span class=\"hljs-string\">\"CODE128\"<\/span> <span class=\"hljs-attr\">:options<\/span>=<span class=\"hljs-string\">\"options\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"db center tc mv3\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">VueBarcode<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">import<\/span> VueBarcode <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@chenfengyuan\/vue-barcode'<\/span>;\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n      <span class=\"hljs-attr\">components<\/span>: {\n        VueBarcode\n      },\n      data() {\n        <span class=\"hljs-keyword\">return<\/span> {\n          <span class=\"hljs-attr\">number<\/span>: <span class=\"hljs-string\">'111111'<\/span>,\n          <span class=\"hljs-attr\">max<\/span>: <span class=\"hljs-number\">100000000<\/span>,\n          <span class=\"hljs-attr\">min<\/span>: <span class=\"hljs-number\">1000<\/span>,\n          <span class=\"hljs-attr\">tag<\/span>: <span class=\"hljs-string\">'img'<\/span>,\n          <span class=\"hljs-attr\">options<\/span>: {\n            <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">2.5<\/span>,\n            <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">150<\/span>,\n          },\n        }\n      },\n      <span class=\"hljs-attr\">methods<\/span>:{\n        generateRandomNumber () {\n          <span class=\"hljs-keyword\">this<\/span>.number = <span class=\"hljs-built_in\">Math<\/span>.floor(<span class=\"hljs-built_in\">Math<\/span>.random()*(<span class=\"hljs-keyword\">this<\/span>.max-<span class=\"hljs-keyword\">this<\/span>.min+<span class=\"hljs-number\">1<\/span>)+<span class=\"hljs-keyword\">this<\/span>.min);\n        },\n      }\n    };\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    \n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>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:<\/p>\n<ul>\n<li>\n<code>:value<\/code>: a <code>v-bind<\/code> that takes in the value of the number variable.<\/li>\n<li>\n<code>tag<\/code>: the barcode\u2019s element tag, which shows the downloadable barcode format. These formats include <strong>img<\/strong>, <strong>SVG<\/strong>, and <strong>canvas<\/strong>.<\/li>\n<li>\n<code>:options<\/code>: the options contain many options like <strong>height<\/strong> and <strong>width<\/strong>, which are both expressed in number, <strong>background<\/strong>, <strong>font<\/strong> e.t.c<\/li>\n<li>\n<code>format<\/code>: There are different barcode formats for which the <strong>CODE128<\/strong> 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.<\/li>\n<\/ul>\n<p>When we click on the <code>generateRandomNumber()<\/code> method, we get a random number that generates a barcode alongside.<\/p>\n<h2>Downloading the barcode<\/h2>\n<p>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 <code>pages\/index.vue<\/code>.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"dib bg-green pa3 br3 white\"<\/span> <span class=\"hljs-attr\">:href<\/span>=<span class=\"hljs-string\">\"link\"<\/span> <span class=\"hljs-attr\">download<\/span>=<span class=\"hljs-string\">\"ship label barcode\"<\/span>&gt;<\/span>Download Barcode<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n      data() {\n        <span class=\"hljs-keyword\">return<\/span> {\n          <span class=\"hljs-attr\">link<\/span>: <span class=\"hljs-string\">''<\/span>,\n        }\n      },\n      <span class=\"hljs-attr\">methods<\/span>:{\n        generateRandomNumber () {\n          <span class=\"hljs-keyword\">this<\/span>.number = <span class=\"hljs-built_in\">Math<\/span>.floor(<span class=\"hljs-built_in\">Math<\/span>.random()*(<span class=\"hljs-keyword\">this<\/span>.max-<span class=\"hljs-keyword\">this<\/span>.min+<span class=\"hljs-number\">1<\/span>)+<span class=\"hljs-keyword\">this<\/span>.min);\n          <span class=\"hljs-keyword\">this<\/span>.$nextTick(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span>=&gt;<\/span> {\n            <span class=\"hljs-keyword\">this<\/span>.link = <span class=\"hljs-keyword\">this<\/span>.$refs.barcode.$el.src\n          })\n        },\n      }\n    };\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code block above, we bind the <code>link<\/code> variable with the <code>src<\/code> value of the generated barcode. This link generates a downloadable image that we can use later on.<\/p>\n<p>At this point, our code in the Nuxt application should look like this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"ph4 pv3 bg-washed-yellow vh-100\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">nav<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"pa3 pa4-ns\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"link dim black b f1-ns f3 tc db mb3 mb4-ns\"<\/span>&gt;<\/span>Barcode Image Generator<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">nav<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"center tc w-60-ns w-70\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"bg-white br3 pa3 ba dib tc\"<\/span> @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"generateRandomNumber\"<\/span>&gt;<\/span> Generate number: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\" bg-washed-red br3 pa2\"<\/span>&gt;<\/span>{{number}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">VueBarcode<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"barcode\"<\/span> <span class=\"hljs-attr\">:value<\/span>=<span class=\"hljs-string\">\"number\"<\/span> <span class=\"hljs-attr\">tag<\/span>=<span class=\"hljs-string\">\"img\"<\/span> <span class=\"hljs-attr\">format<\/span>=<span class=\"hljs-string\">\"CODE128\"<\/span> <span class=\"hljs-attr\">:options<\/span>=<span class=\"hljs-string\">\"options\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"db center tc mv3\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">VueBarcode<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"dib bg-green pa3 br3 white\"<\/span> <span class=\"hljs-attr\">:href<\/span>=<span class=\"hljs-string\">\"link\"<\/span> <span class=\"hljs-attr\">download<\/span>=<span class=\"hljs-string\">\"ship label barcode\"<\/span>&gt;<\/span>Download Barcode<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">import<\/span> VueBarcode <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@chenfengyuan\/vue-barcode'<\/span>;\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n      <span class=\"hljs-attr\">components<\/span>: {\n        VueBarcode\n      },\n      data() {\n        <span class=\"hljs-keyword\">return<\/span> {\n          <span class=\"hljs-attr\">number<\/span>: <span class=\"hljs-string\">'111111'<\/span>,\n          <span class=\"hljs-attr\">max<\/span>: <span class=\"hljs-number\">100000000<\/span>,\n          <span class=\"hljs-attr\">min<\/span>: <span class=\"hljs-number\">1000<\/span>,\n          <span class=\"hljs-attr\">tag<\/span>: <span class=\"hljs-string\">'img'<\/span>,\n          <span class=\"hljs-attr\">link<\/span>: <span class=\"hljs-string\">''<\/span>,\n          <span class=\"hljs-attr\">options<\/span>: {\n            <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">2.5<\/span>,\n            <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">150<\/span>,\n          },\n        }\n      },\n      <span class=\"hljs-attr\">methods<\/span>:{\n        generateRandomNumber () {\n          <span class=\"hljs-keyword\">this<\/span>.number = <span class=\"hljs-built_in\">Math<\/span>.floor(<span class=\"hljs-built_in\">Math<\/span>.random()*(<span class=\"hljs-keyword\">this<\/span>.max-<span class=\"hljs-keyword\">this<\/span>.min+<span class=\"hljs-number\">1<\/span>)+<span class=\"hljs-keyword\">this<\/span>.min);\n          <span class=\"hljs-keyword\">this<\/span>.$nextTick(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span>=&gt;<\/span> {\n            <span class=\"hljs-keyword\">this<\/span>.link = <span class=\"hljs-keyword\">this<\/span>.$refs.barcode.$el.src\n          })\n        },\n      }\n    };\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>While our application will look like the below in the browser:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1648743570\/\/res.cloudinary.com\/mediadevs\/image\/upload\/e-622f762c6cb5ad0068bc82c6\/ootuvkfhd0srgps6tjkq.gif\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\" \/><\/p>\n<h2>Conclusion<\/h2>\n<p>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.<\/p>\n<h2>Resources<\/h2>\n<p><a href=\"https:\/\/github.com\/lindell\/JsBarcode#options\"><\/a>&#8211; <a href=\"https:\/\/github.com\/lindell\/JsBarcode#options\">JavaScript barcode generation library<\/a><\/p>\n<ul>\n<li>\n<a href=\"https:\/\/github.com\/fengyuanchen\/vue-barcode\/tree\/v1\">Vue.js barcode component<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27873,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,372,371],"class_list":["post-27872","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-nuxtjs","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Generate a shipping label barcode image in NuxtJS<\/title>\n<meta name=\"description\" content=\"Learn how to generate shipping label barcodes using CODE128 barcodes in a Nuxt.js application.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Generate a shipping label barcode image in NuxtJS\" \/>\n<meta property=\"og:description\" content=\"Learn how to generate shipping label barcodes using CODE128 barcodes in a Nuxt.js application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-06T02:26:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-08T21:38:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681926037\/Web_Assets\/blog\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"886\" \/>\n\t<meta property=\"og:image:height\" content=\"550\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Generate a shipping label barcode image in NuxtJS\",\"datePublished\":\"2022-04-06T02:26:38+00:00\",\"dateModified\":\"2025-03-08T21:38:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926037\/Web_Assets\/blog\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"NuxtJS\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/\",\"name\":\"Generate a shipping label barcode image in NuxtJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926037\/Web_Assets\/blog\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055.png?_i=AA\",\"datePublished\":\"2022-04-06T02:26:38+00:00\",\"dateModified\":\"2025-03-08T21:38:47+00:00\",\"description\":\"Learn how to generate shipping label barcodes using CODE128 barcodes in a Nuxt.js application.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926037\/Web_Assets\/blog\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926037\/Web_Assets\/blog\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055.png?_i=AA\",\"width\":886,\"height\":550},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generate a shipping label barcode image in NuxtJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Generate a shipping label barcode image in NuxtJS","description":"Learn how to generate shipping label barcodes using CODE128 barcodes in a Nuxt.js application.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/","og_locale":"en_US","og_type":"article","og_title":"Generate a shipping label barcode image in NuxtJS","og_description":"Learn how to generate shipping label barcodes using CODE128 barcodes in a Nuxt.js application.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-04-06T02:26:38+00:00","article_modified_time":"2025-03-08T21:38:47+00:00","og_image":[{"width":886,"height":550,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681926037\/Web_Assets\/blog\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/"},"author":{"name":"","@id":""},"headline":"Generate a shipping label barcode image in NuxtJS","datePublished":"2022-04-06T02:26:38+00:00","dateModified":"2025-03-08T21:38:47+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926037\/Web_Assets\/blog\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055.png?_i=AA","keywords":["Guest Post","Image","NuxtJS","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/","name":"Generate a shipping label barcode image in NuxtJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926037\/Web_Assets\/blog\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055.png?_i=AA","datePublished":"2022-04-06T02:26:38+00:00","dateModified":"2025-03-08T21:38:47+00:00","description":"Learn how to generate shipping label barcodes using CODE128 barcodes in a Nuxt.js application.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926037\/Web_Assets\/blog\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926037\/Web_Assets\/blog\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055.png?_i=AA","width":886,"height":550},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-shipping-label-barcode-image-in-nuxtjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Generate a shipping label barcode image in NuxtJS"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926037\/Web_Assets\/blog\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055\/5d250062fd86daf0c1e8190bb3a498045948cc01-886x550-1_2787383055.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27872"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27872\/revisions"}],"predecessor-version":[{"id":37141,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27872\/revisions\/37141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27873"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}