{"id":28397,"date":"2022-05-05T08:37:58","date_gmt":"2022-05-05T08:37:58","guid":{"rendered":"http:\/\/create-a-contact-card-barcode-generator-nuxt.js"},"modified":"2022-05-05T08:37:58","modified_gmt":"2022-05-05T08:37:58","slug":"create-a-contact-card-barcode-generator-nuxt-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/","title":{"rendered":"Create a Contact Card Barcode Generator NuxtJS"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>A contact card, also known as a Virtual Contact File (VCF), is a standardized digital file format that stores contact information. Contact cards are versatile enough to store information like names, phone numbers, addresses, email e.t.c\nThe most incredible flexibility of contact cards is their ability to be shared electronically via messages, emails, QR codes, or barcodes.<\/p>\n<p>Barcodes contain machine-readable vertical lines that provide information about the items attached. This article will discuss how to encode a contact card in a barcode.<\/p>\n<p>We will be using <a href=\"https:\/\/nuxtjs.org\/\">Nuxt.js<\/a> and <a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> to build the contact card barcode generator. At the end of this article, we would have learned how to encode contact cards in a barcode, upload the generated barcode to Cloudinary and serve the Cloudinary link for easy sharing.<\/p>\n<p>Nuxt.js is a Vue.js-based open-source JavaScript library that enhances building server-rendered Vue.js applications to produce more performant web applications.<\/p>\n<p>Cloudinary, on the other hand, is a cloud-based asset management platform that offers services for managing and transforming uploaded videos and images for usage on the web.<\/p>\n<h2>Sandbox<\/h2>\n<p>We can find the completed project on <a href=\"https:\/\/codesandbox.io\/s\/contact-card-barcode-generator-8e41ou\">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\/contact-card-barcode-generator-8e41ou?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=\"Creating a contact card barcode 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\/contact-card-barcode-generator\">here<\/a>.<\/p>\n<h2>Prerequisite<\/h2>\n<p>Understanding this article requires the following:<\/p>\n<ul>\n<li>Installation of Node.js.<\/li>\n<li>Basic knowledge of JavaScript.<\/li>\n<li>Familiarity with Nuxt.js<\/li>\n<li>Cloudinary account. <a href=\"https:\/\/cloudinary.com\/signup\">Sign up<\/a> for a free account.<\/li>\n<\/ul>\n<h2>Creating a Nuxt project<\/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:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1651273072\/e-622f762c6cb5ad0068bc82c6\/ewrlrxmlrakxhwws7655.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"745\" height=\"268\"\/><\/p>\n<p>After successful project creation, we navigate into our directory and start our application by running the following commands.<\/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>\nnpm 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:3000\">http:\/\/localhost:3000<\/a>.<\/p>\n<h2>Creating the contact card<\/h2>\n<p>As mentioned earlier, contact cards have various information stored in them. In this article, we will be focusing on creating a simple contact card that has just the person\u2019s name and the phone number attached.<\/p>\n<p>We will do this by navigating into our <code>pages\/index.vue<\/code> to add the code below:<\/p>\n<p><a href=\"https:\/\/gist.github.com\/MoeRayo\/69475376461afd9eab2ebabbd79dd2d3\">https:\/\/gist.github.com\/MoeRayo\/69475376461afd9eab2ebabbd79dd2d3<\/a><\/p>\n<p>We created a form with two input fields containing the contact\u2019s name and the contact\u2019s number in the code above. We also added a button that, when clicked, would run a method that would submit the value of the input fields, which will enable the encoding in the barcode.<\/p>\n<p>We should have a UI that looks like the below in our browser.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1651273322\/e-622f762c6cb5ad0068bc82c6\/zrpckbzuvloqzr3cwmns.png\" alt=\"The contact card\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"950\" height=\"382\"\/><\/p>\n<h2>Generating the barcode<\/h2>\n<p>After creating the input fields that take in the contact\u2019s information, our next action point will be to encode the data to a barcode. For the barcode encoding, 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<\/a> <a href=\"https:\/\/github.com\/fengyuanchen\/vue-barcode\/tree\/v1\">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-2\" 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-2\"><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 by updating the <code>pages\/index.vue<\/code> with the code found below:<\/p>\n<p><a href=\"https:\/\/gist.github.com\/MoeRayo\/fbe84e5523781e65363de36d1bd383d9\">https:\/\/gist.github.com\/MoeRayo\/fbe84e5523781e65363de36d1bd383d9<\/a><\/p>\n<p>We imported the barcode package in the code block above and 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 <code>contactName<\/code> and <code>contactNumber<\/code>, which are initialized in the <code>data<\/code> property.<\/li>\n<li>\n<code>tag<\/code>: the barcode\u2019s element tag, which shows the barcode format. These formats include <strong>img<\/strong>, <strong>SVG<\/strong>, and <strong>canvas<\/strong>.<\/li>\n<\/ul>\n<p>Filling the input fields will produce a UI that looks like the below in the browser:\n<img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1651273512\/e-622f762c6cb5ad0068bc82c6\/h8u9uavvcs7nhvewakpl.png\" alt=\"UI of the generated barcode\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"950\" height=\"371\"\/><\/p>\n<h2>Configuring Cloudinary<\/h2>\n<p>Having successfully generated a barcode with a contact card encoded in it, we will proceed to upload the generated barcode image to Cloudinary and get the image back from Cloudinary for display in the browser.<\/p>\n<p>We will need to have a Cloudinary <strong>cloud name<\/strong> and an <strong>upload preset<\/strong> credentials for performing the upload, thus making it imperative to create an account with Cloudinary. Free sign up can be done <a href=\"https:\/\/cloudinary.com\/signup\">here<\/a>.<\/p>\n<p>We will be registering for an unsigned upload preset, limiting access to people who can upload to our cloud. To do this, we will log in to the Cloudinary dashboard and navigate to the <strong>settings<\/strong> tab, like so:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1651273638\/e-622f762c6cb5ad0068bc82c6\/v5qhtba8kdi4jpcp4ust.png\" alt=\"Cloudinary settings tab\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1132\" height=\"103\"\/><\/p>\n<p>From the settings tab, we will be presented with four tab options, from which we will pick the <strong>upload<\/strong> tab, like so:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1651273679\/e-622f762c6cb5ad0068bc82c6\/vvjcbse81ueyclfxurth.png\" alt=\"The upload tab in the Cloudinary settings\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1718\" height=\"190\"\/><\/p>\n<p>From here, we can choose from any of the unsigned uploads presets or create a new unsigned one as we deem fit.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1651273703\/e-622f762c6cb5ad0068bc82c6\/dkhwpq3j2hdwqrigp0fk.png\" alt=\"The upload preset setting in the Cloudinary dashboard\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"886\" height=\"503\"\/><\/p>\n<p>At this point, we should have our Cloudinary cloud name and upload presets ready and thus should be fully prepared to begin working on uploading our barcodes to Cloudinary.<\/p>\n<h2>Uploading barcode image to Cloudinary<\/h2>\n<p>At this stage, uploading our barcode image to Cloudinary exposes us to the storage capacities provided by Cloudinary. We can begin this process by adding the code below in the <code>pages\/index.vue<\/code>.<\/p>\n<p><a href=\"https:\/\/gist.github.com\/MoeRayo\/b8f6a7e7e81f35e69ce5b3929866c717\">https:\/\/gist.github.com\/MoeRayo\/b8f6a7e7e81f35e69ce5b3929866c717<\/a><\/p>\n<p>We achieved the following from the code snippet above:<\/p>\n<p>We added a method called <code>upload<\/code> to the form, executed when triggered by the <strong>generate barcode<\/strong> button.<\/p>\n<ul>\n<li>Leveraged Vue\u2019s <code>$attrs<\/code> object to get the object that were not declared in the <code>VueBarcode<\/code>  components <code>props<\/code> options.<\/li>\n<li>The upload function also runs the <code>prepareFormData<\/code> function that contains the form data.<\/li>\n<li>Added a data property to manage the error, the <code>cloudname<\/code>, <code>preset<\/code>, <code>formdata<\/code>, and <code>tags<\/code> for better organizing our assets, e.t.c.<\/li>\n<li>Used <a href=\"https:\/\/www.npmjs.com\/package\/axios\">Axios<\/a> to post data to the Cloudinary endpoint using the request object options of the <code>url<\/code>, POST <code>method<\/code> and the <code>formData<\/code>.<\/li>\n<li>Functionality to capture if the upload was successful or not. After a successful upload, we got access to some returned data like the <code>secured_url<\/code> used to render the uploaded image back in the browser.<\/li>\n<\/ul>\n<h2>Creating a shareable link<\/h2>\n<p>Sharing the contact card barcode is as important as the barcode encoding process. To share our barcode, we will modify the <code>pages\/index.vue<\/code> by adding functionality to create and display the generated image URL and a button that enables us to copy the URL.<\/p>\n<p>We will add the following code in the <code>pages\/index.vue<\/code>.<\/p>\n<p><a href=\"https:\/\/gist.github.com\/MoeRayo\/f1ee747c68d77f861d9f85b4c4cda886\">https:\/\/gist.github.com\/MoeRayo\/f1ee747c68d77f861d9f85b4c4cda886<\/a><\/p>\n<p>In the code snippet above, we leveraged the Clipboard API to get the <strong>url<\/strong> of the image served from Cloudinary, which gets added as the copied input value.<\/p>\n<p>Our application, at this stage, should look like the below:\n<img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1651273856\/e-622f762c6cb5ad0068bc82c6\/srewnmxl6bcxyakyfo6r.gif\" alt=\"Demo of the contact card barcode\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"656\" height=\"368\"\/><\/p>\n<p>Here is the generated barcode as seen in our Cloudinary media library.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1651273883\/e-622f762c6cb5ad0068bc82c6\/pmy4rrpt43uh1oqmjyzt.png\" alt=\"Generated contact card barcode in Cloudinary media library\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"283\" height=\"259\"\/><\/p>\n<p>Click <a href=\"https:\/\/res.cloudinary.com\/moerayo\/image\/upload\/v1650553163\/ni7l4v2vs243gwoyaskm.png\">here<\/a> to find the shareable link from the generated contact card.<\/p>\n<h2>Conclusion<\/h2>\n<p>This post explains encoding a contact card in a barcode with a shareable link provided using Cloudinary and Nuxt.js.<\/p>\n<h2>Resources<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/javascript_image_and_video_upload\">Image and Video upload using Cloudinary SDK<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/image_video_and_file_upload\">Media upload in Cloudinary<\/a>\n<\/li>\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":28398,"comment_status":"","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-28397","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>Create a Contact Card Barcode Generator NuxtJS<\/title>\n<meta name=\"description\" content=\"Learn how to encode a contact card in a barcode and upload it on Cloudinary.\" \/>\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\/create-a-contact-card-barcode-generator-nuxt-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Contact Card Barcode Generator NuxtJS\" \/>\n<meta property=\"og:description\" content=\"Learn how to encode a contact card in a barcode and upload it on Cloudinary.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-05T08:37:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928549\/Web_Assets\/blog\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee.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\/create-a-contact-card-barcode-generator-nuxt-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Create a Contact Card Barcode Generator NuxtJS\",\"datePublished\":\"2022-05-05T08:37:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928549\/Web_Assets\/blog\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee.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\/create-a-contact-card-barcode-generator-nuxt-js\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/\",\"name\":\"Create a Contact Card Barcode Generator NuxtJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928549\/Web_Assets\/blog\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee.png?_i=AA\",\"datePublished\":\"2022-05-05T08:37:58+00:00\",\"description\":\"Learn how to encode a contact card in a barcode and upload it on Cloudinary.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928549\/Web_Assets\/blog\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928549\/Web_Assets\/blog\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee.png?_i=AA\",\"width\":886,\"height\":550},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a Contact Card Barcode Generator 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":"Create a Contact Card Barcode Generator NuxtJS","description":"Learn how to encode a contact card in a barcode and upload it on Cloudinary.","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\/create-a-contact-card-barcode-generator-nuxt-js\/","og_locale":"en_US","og_type":"article","og_title":"Create a Contact Card Barcode Generator NuxtJS","og_description":"Learn how to encode a contact card in a barcode and upload it on Cloudinary.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-05-05T08:37:58+00:00","og_image":[{"width":886,"height":550,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928549\/Web_Assets\/blog\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee.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\/create-a-contact-card-barcode-generator-nuxt-js\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/"},"author":{"name":"","@id":""},"headline":"Create a Contact Card Barcode Generator NuxtJS","datePublished":"2022-05-05T08:37:58+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928549\/Web_Assets\/blog\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee.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\/create-a-contact-card-barcode-generator-nuxt-js\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/","name":"Create a Contact Card Barcode Generator NuxtJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928549\/Web_Assets\/blog\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee.png?_i=AA","datePublished":"2022-05-05T08:37:58+00:00","description":"Learn how to encode a contact card in a barcode and upload it on Cloudinary.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928549\/Web_Assets\/blog\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928549\/Web_Assets\/blog\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee.png?_i=AA","width":886,"height":550},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-contact-card-barcode-generator-nuxt-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create a Contact Card Barcode Generator 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\/v1681928549\/Web_Assets\/blog\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee\/5d382f826d35841e5f30d733f0450476bb886e83-886x550-1_2839860fee.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28397","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=28397"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28397\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28398"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}