{"id":27914,"date":"2022-06-09T09:05:55","date_gmt":"2022-06-09T09:05:55","guid":{"rendered":"http:\/\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs"},"modified":"2022-06-09T09:05:55","modified_gmt":"2022-06-09T09:05:55","slug":"encode-google-calendar-invites-in-a-qr-code-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/","title":{"rendered":"Encode Calendar Invites in a QR Code in NuxtJS"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>The discovery and invention of the Quick Response (QR) code made it possible to embed digital data in text, links, tickets for concerts, and other use cases, thereby making use of a mobile device to translate the image into text for the user.<\/p>\n<p>This tutorial will explain the process of encoding Google calendar invites into a QR code for your event.<\/p>\n<h2>Sandbox<\/h2>\n<p>The completed project code for this demo is in a <a href=\"https:\/\/codesandbox.io\/s\/google-calendar-invite-i68ykb\">CodeSandbox<\/a>. Fork and run the code to get started.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/google-calendar-invite-i68ykb?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=\"Encode google calendar invite\"\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 \"><p>For your reference, check the following <a href=\"https:\/\/github.com\/Terieyenike\/nuxtjs-google-calendar-invite\">source code<\/a> on GitHub.<\/p>\n<h2>Prerequisites<\/h2>\n<p>Understanding this article requires the following:<\/p>\n<ul>\n<li>Basic knowledge of Vue<\/li>\n<li>Node.js v10 and above. Required for dependency installation<\/li>\n<\/ul>\n<h2>Setup for Google Calendar Invite<\/h2>\n<p>Before encoding a Google calendar invite link in the Nuxt application, you\u2019ll need to run the following command to scaffold the project:<\/p>\n<pre><code>npx create-nuxt-app nuxtjs-calendar-qrcode\n<\/code><\/pre>\n<p>With the above command, choose the following configurations as shown below:<\/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_1F157B621602D64F2D281E11C17095D4BEBC4B72755EC2E77EFBFC900B412BE1_1653317587163_Screen+Shot+2022-05-23+at+09.11.20.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"924\" height=\"291\"\/><\/p>\n<p>Then navigate into the project directory and run the development server, which is accessible on <code>http:\/\/localhost:3000<\/code> with the following command:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    cd nuxtjs-calendar-qrcode\n    \n    yarn dev\n<\/code><\/pre>\n<p>Next, install the dependencies that are responsible for creating the QR code:<\/p>\n<pre><code> npm install vue@2 @chenfengyuan\/vue-qrcode@1\n<\/code><\/pre>\n<h2>Setup Styling for the Application<\/h2>\n<p>With the digital transformation the world is experiencing, a QR code gives users the ability to scan the code with a mobile device to receive an invite to an event and add the event to the Google calendar.<\/p>\n<p>This process is possible by encoding the link information in the image.<\/p>\n<p>First, let\u2019s create a folder called <code>assets<\/code> and the <code>main<\/code> folder in the root directory to include all the styles needed for the application in the <code>styles.css<\/code> file. Copy and paste the following code in <code>assets\/main\/styles.css<\/code>.<\/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_1F157B621602D64F2D281E11C17095D4BEBC4B72755EC2E77EFBFC900B412BE1_1653321743648_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"196\" height=\"451\"\/><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">    <span class=\"hljs-comment\">\/\/ assets\/main\/styles.css<\/span>\n    \n    @import url(<span class=\"hljs-string\">\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&amp;display=swap\"<\/span>);\n    *,\n    *::before,\n    *::after {\n      margin: <span class=\"hljs-number\">0<\/span>;\n      padding: <span class=\"hljs-number\">0<\/span>;\n      box-sizing: border-box;\n    }\n    body,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    p,\n    figure,\n    picture {\n      margin: <span class=\"hljs-number\">0<\/span>;\n    }\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    p {\n      font-weight: <span class=\"hljs-number\">400<\/span>;\n    }\n    body {\n      font-family: <span class=\"hljs-string\">\"Montserrat\"<\/span>, sans-serif;\n      font-size: <span class=\"hljs-number\">1.125<\/span>rem;\n      color: <span class=\"hljs-comment\">#ffffff;<\/span>\n      background: <span class=\"hljs-comment\">#27251f;<\/span>\n      line-height: <span class=\"hljs-number\">1.5<\/span>;\n      min-height: <span class=\"hljs-number\">100<\/span>vh;\n    }\n    .container {\n      max-width: <span class=\"hljs-number\">75<\/span>rem;\n      width: <span class=\"hljs-number\">85<\/span>%;\n      margin-inline: auto;\n    }\n    footer {\n      position: fixed;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      bottom: <span class=\"hljs-number\">0<\/span>;\n      left: <span class=\"hljs-number\">0<\/span>;\n      width: <span class=\"hljs-number\">100<\/span>%;\n    }\n    .row {\n      height: <span class=\"hljs-number\">100<\/span>vh;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n    }\n    .row__left {\n      margin-bottom: <span class=\"hljs-number\">1<\/span>em;\n      text-align: center;\n    }\n    @media screen <span class=\"hljs-keyword\">and<\/span> (min-width: <span class=\"hljs-number\">768<\/span>px) {\n      .row {\n        flex-direction: row;\n      }\n      .row__left {\n        text-align: left;\n        width: <span class=\"hljs-number\">60<\/span>%;\n      }\n      h1 {\n        font-size: <span class=\"hljs-number\">2.5<\/span>rem;\n      }\n      p {\n        font-size: <span class=\"hljs-number\">1.5<\/span>rem;\n      }\n    }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Next, update the CSS array in the <code>nuxt.config.js<\/code> file in the root directory to include the created CSS.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    \/\/ nuxt.config.js\n    \n    export default {\n      ...\n      css: [&quot;@\/assets\/main\/styles.css&quot;]\n    }\n<\/code><\/pre>\n<h2>Creating the Google Calendar Invite QR Code<\/h2>\n<p>Great! The next step is to create the component for the Google calendar invite. In the root directory, create a folder called <code>components<\/code> and a file named <code>Calendar.vue<\/code>.<\/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_1F157B621602D64F2D281E11C17095D4BEBC4B72755EC2E77EFBFC900B412BE1_1653323138220_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"190\" height=\"441\"\/><\/p>\n<p>Copy and paste the following code:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    \/\/ components\/Calendar.vue\n    \n    &lt;template&gt;\n      &lt;div class=&quot;container&quot;&gt;\n        &lt;section class=&quot;row&quot;&gt;\n          &lt;div class=&quot;row__left&quot;&gt;\n            &lt;h1&gt;Getting Started in Community&lt;\/h1&gt;\n            &lt;p&gt;Scan the code to attend&lt;\/p&gt;\n          &lt;\/div&gt;\n          &lt;qrcode\n            :options=&quot;{\n              color: {\n                dark: '#75DBCD',\n                light: '#2E282A',\n              },\n              width: 300,\n            }&quot;\n            value=&quot;https:\/\/calendar.google.com\/event?action=TEMPLATE&amp;tmeid=X2Nscjc4YmJoZXNyNWtsM2pjcDlqOGkyY2NwMTRpcGEwY2xyNmFyamtlY242b3Q5ZWRsZ2cgdGV5ZW5pa2UxQG0&amp;tmsrc=teyenike1%40gmail.com\n    &quot;\n          &gt;&lt;\/qrcode&gt;\n        &lt;\/section&gt;\n        &lt;footer&gt;\n          &lt;address&gt;Teri &amp;copy; 2022 | Built with Nuxt.js&lt;\/address&gt;\n        &lt;\/footer&gt;\n      &lt;\/div&gt;\n    &lt;\/template&gt;\n    \n    &lt;script&gt;\n    import VueQrcode from &quot;@chenfengyuan\/vue-qrcode&quot;;\n    export default {\n      components: {\n        qrcode: VueQrcode,\n      },\n    };\n    &lt;\/script&gt;\n<\/code><\/pre>\n<p>The code snippets above do the following:<\/p>\n<ul>\n<li>Import the <code>VueQrcode<\/code> package and initialize it in the Vue instance in the components object<\/li>\n<li>In the <code>&lt;qrcode&gt;<\/code> component, there is an options property object with the values for the color (representing the foreground and background color of the QR code) and the width value in pixels<\/li>\n<li>\n<code>value<\/code>: link to the calendar invite for the event<\/li>\n<li>The other data on the app are static, which shows the information of the events and the footer<\/li>\n<\/ul>\n<p>Next, import the <code>calendar<\/code> component to the <code>pages\/index.vue<\/code> file. Copy and paste the following code:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    \/\/ pages\/index.vue\n    \n    &lt;template&gt;\n      &lt;Calendar \/&gt;\n    &lt;\/template&gt;\n<\/code><\/pre>\n<p>Here is the final look of the application.<\/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_1F157B621602D64F2D281E11C17095D4BEBC4B72755EC2E77EFBFC900B412BE1_1653946537618_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1114\" height=\"596\"\/><\/p>\n<p>Open your camera app and scan the QR code; a pop-up with the link appears that leads to the event on your Google calendar application.<\/p>\n<h2>Conclusion<\/h2>\n<p>This article discussed how to encode a Google calendar invite in a QR code that you can deploy for your subsequent events like Twitter spaces or a webinar.<\/p>\n<p>Try this innovative approach today!<\/p>\n<h2>Learn More<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/github.com\/fengyuanchen\/vue-qrcode\/tree\/v1\">Vue QR code component<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/fengyuanchen.github.io\/vue-qrcode\/\">Usage and options of QR code component<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27915,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,177,372,371,315],"class_list":["post-27914","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-javascript","tag-nuxtjs","tag-under-review","tag-vue"],"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>Encode Calendar Invites in a QR Code in NuxtJS<\/title>\n<meta name=\"description\" content=\"Encoding Google calendar invites into a QR code for your event makes it possible to embed digital data in text, links, tickets for concerts, and other use cases, thereby making use of a mobile device to translate the image into text for the user.\" \/>\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\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Encode Calendar Invites in a QR Code in NuxtJS\" \/>\n<meta property=\"og:description\" content=\"Encoding Google calendar invites into a QR code for your event makes it possible to embed digital data in text, links, tickets for concerts, and other use cases, thereby making use of a mobile device to translate the image into text for the user.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-09T09:05:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925905\/Web_Assets\/blog\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"4896\" \/>\n\t<meta property=\"og:image:height\" content=\"3264\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Encode Calendar Invites in a QR Code in NuxtJS\",\"datePublished\":\"2022-06-09T09:05:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925905\/Web_Assets\/blog\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Javascript\",\"NuxtJS\",\"Under Review\",\"Vue\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/\",\"name\":\"Encode Calendar Invites in a QR Code in NuxtJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925905\/Web_Assets\/blog\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69.jpg?_i=AA\",\"datePublished\":\"2022-06-09T09:05:55+00:00\",\"description\":\"Encoding Google calendar invites into a QR code for your event makes it possible to embed digital data in text, links, tickets for concerts, and other use cases, thereby making use of a mobile device to translate the image into text for the user.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925905\/Web_Assets\/blog\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925905\/Web_Assets\/blog\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69.jpg?_i=AA\",\"width\":4896,\"height\":3264},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Encode Calendar Invites in a QR Code 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":"Encode Calendar Invites in a QR Code in NuxtJS","description":"Encoding Google calendar invites into a QR code for your event makes it possible to embed digital data in text, links, tickets for concerts, and other use cases, thereby making use of a mobile device to translate the image into text for the user.","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\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/","og_locale":"en_US","og_type":"article","og_title":"Encode Calendar Invites in a QR Code in NuxtJS","og_description":"Encoding Google calendar invites into a QR code for your event makes it possible to embed digital data in text, links, tickets for concerts, and other use cases, thereby making use of a mobile device to translate the image into text for the user.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-09T09:05:55+00:00","og_image":[{"width":4896,"height":3264,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925905\/Web_Assets\/blog\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/"},"author":{"name":"","@id":""},"headline":"Encode Calendar Invites in a QR Code in NuxtJS","datePublished":"2022-06-09T09:05:55+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925905\/Web_Assets\/blog\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69.jpg?_i=AA","keywords":["Guest Post","Javascript","NuxtJS","Under Review","Vue"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/","name":"Encode Calendar Invites in a QR Code in NuxtJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925905\/Web_Assets\/blog\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69.jpg?_i=AA","datePublished":"2022-06-09T09:05:55+00:00","description":"Encoding Google calendar invites into a QR code for your event makes it possible to embed digital data in text, links, tickets for concerts, and other use cases, thereby making use of a mobile device to translate the image into text for the user.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925905\/Web_Assets\/blog\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925905\/Web_Assets\/blog\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69.jpg?_i=AA","width":4896,"height":3264},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/encode-google-calendar-invites-in-a-qr-code-in-nuxtjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Encode Calendar Invites in a QR Code 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\/v1681925905\/Web_Assets\/blog\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69\/065643b90fede5e131135956f9f435ad974b0bc4-4896x3264-1_2791533a69.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27914","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=27914"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27914\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27915"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}