{"id":28155,"date":"2022-06-10T07:57:17","date_gmt":"2022-06-10T07:57:17","guid":{"rendered":"http:\/\/create-custom-summer-concert-tickets-in-nuxtjs"},"modified":"2025-09-26T13:45:22","modified_gmt":"2025-09-26T20:45:22","slug":"create-custom-summer-concert-tickets-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/","title":{"rendered":"Create Custom Summer Concert Tickets in NuxtJS"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Concerts are music performances done by one or more musicians and often happen a lot in the summer due to the warm weather that facilitates a lot of outdoor gatherings.\nTickets for such events have gone through several transformations; from the age of manual writing with pen on paper to the printing press era to becoming entirely digitized.<\/p>\n<p>This article will discuss creating custom summer concert tickets using <a href=\"https:\/\/nuxtjs.org\/\">Nuxt.js<\/a> and <a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a>. After reading this article, we\u2019ll have learned how to create custom concert tickets in Nuxt.js using images stored in Cloudinary by applying Cloudinary transformations.<\/p>\n<p>Nuxt.js is a Vue.js based, open-source JavaScript library that improves building server-rendered Vue.js applications, leading to more performant web applications.<\/p>\n<p>Cloudinary is a cloud-based video and image management platform that offers services for managing and transforming uploaded assets for usage on the web.<\/p>\n<h2>SandBox<\/h2>\n<p>We completed this project in a <a href=\"https:\/\/codesandbox.io\/s\/custom-summer-ticket-rfx9ne\">CodeSandbox<\/a>. Fork and run it to quickly get started.<\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/custom-summer-ticket-rfx9ne?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 custom summer ticket in Nuxt.js\"\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\n<div class=\"wp-block-cloudinary-markdown \"><h2>Github<\/h2>\n<p>Check out the complete source code <a href=\"https:\/\/github.com\/MoeRayo\/concert-ticket-generator\">here<\/a>.<\/p>\n<h2>Prerequisites<\/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>A Cloudinary account (sign up <a href=\"https:\/\/cloudinary.com\/signup\">here<\/a>).<\/li>\n<\/ul>\n<h2>Creating a Nuxt project<\/h2>\n<p>Use <code>npx create-nuxt-app &lt;project-name&gt;<\/code> to create a new Nuxt.js project.\nThe process of scaffolding the project would provide 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\/v1654466883\/e-622f762c6cb5ad0068bc82c6\/vcpjvfz385l6n21cae2p.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"765\" height=\"282\"\/><\/p>\n<p>After successful project creation, we\u2019ll navigate into our directory and 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>\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.js will, in turn, start a hot-reloading development environment that is accessible by default at <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a>.<\/p>\n<h2>Configuring Cloudinary<\/h2>\n<p>To use Cloudinary, we will need to create an <a href=\"https:\/\/cloudinary.com\/\">account<\/a> and also install the <a href=\"https:\/\/cloudinary.nuxtjs.org\/\">Cloudinary Nuxt SDK<\/a> in our project, 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\">@nuxtjs<\/span>\/cloudinary\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<h3>Configuring <code>nuxt.config<\/code> for Cloudinary<\/h3>\n<p>We need to configure our Nuxt.js application in the <code>nuxt.config<\/code> file before we can use Cloudinary.<\/p>\n<p>To do this, we will need to perform the following steps:<\/p>\n<ol>\n<li>\n<p>Create a <code>.env<\/code> file in the root of our Nuxt.js project and add our Cloudinary <strong>Cloud name<\/strong>, <strong>API Key<\/strong>, and the <strong>API Secret<\/strong>. We can find these by navigating to the <a href=\"https:\/\/cloudinary.com\/console\/\">Cloudinary dashboard<\/a>.<\/p>\n<\/li>\n<li>\n<p>Register these properties in our <code>.env<\/code> file like so:<\/p>\n<\/li>\n<\/ol>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">cloudName=<span class=\"hljs-string\">'***'<\/span>\napiKey=<span class=\"hljs-string\">'***'<\/span>\napiSecret=<span class=\"hljs-string\">'***'<\/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\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ol start=\"3\">\n<li>Register the Cloudinary component for global use in the <code>nuxt.config.js<\/code> file by adding <code>'@nuxtjs\/cloudinary'<\/code> in the <code>modules<\/code> section:<\/li>\n<\/ol>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">modules<\/span>: <span class=\"hljs-selector-attr\">&#91; <span class=\"hljs-string\">'@nuxtjs\/cloudinary'<\/span> ]<\/span>,\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><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<ol start=\"4\">\n<li>Add a <code>cloudinary<\/code> section in the <code>nuxt.config.js<\/code> like so:<\/li>\n<\/ol>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">cloudinary<\/span>: {\n  <span class=\"hljs-attribute\">cloudName<\/span>: process.env.cloudName,\n  apiKey: process.env.apiKey,\n  apiSecret: process.env.apiSecret,\n  useComponent: true,\n},\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><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>The <code>useComponent<\/code> attribute is needed to make Cloudinary components like the <code>cldimage<\/code> and <code>cldtransformation<\/code> available for usage in Nuxt.js.<\/p>\n<p><strong>NB<\/strong>: <em>Endeavor to replace all occurrences of \u201c<\/em>**\u201c with the correct values.<\/p>\n<h2>Image Upload to Cloudinary<\/h2>\n<p>With our Nuxt.js app scaffolding completed, we\u2019ll upload images from <a href=\"https:\/\/unsplash.com\/\">Unsplash<\/a> to Cloudinary. Cloudinary allows us to upload images via the dashboard by clicking the <strong>Media Library<\/strong> tab.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1654467009\/e-622f762c6cb5ad0068bc82c6\/bzwq0aeh2ahirmsyucuh.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"889\" height=\"46\"\/><\/p>\n<p>After uploading the images, we will need to copy the <code>public Id<\/code> to pick each uploaded image from Cloudinary.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1654467089\/e-622f762c6cb5ad0068bc82c6\/usxzn97pcsm6fqdqtzpp.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1063\" height=\"253\"\/><\/p>\n<h2>Setting up the Image Store<\/h2>\n<p>We will create a <code>utils\/ticket.json<\/code> file which will hold the Cloudinary individual image information for each image occurrence in our application.\nA sample snippet of our <code>ticket.json<\/code> file should look like this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\">&#91;\n  {\n    <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">1<\/span>,\n    <span class=\"hljs-attr\">\"publicId\"<\/span>: <span class=\"hljs-string\">\"adrian-n-unsplash\"<\/span>\n  }\n]\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Creating the Concert Ticket<\/h2>\n<p>In creating the concert ticket, we will need to set up the markup, including Cloudinary\u2019s <code>cld-image<\/code> and <code>cld-transformation<\/code> component, which can be likened to using the native <code>&lt;img&gt;<\/code> tag in an HTML document.<\/p>\n<p>To achieve this, we will navigate to the <code>pages\/index.vue<\/code> file and replace the content with the code below:<\/p>\n<p><a href=\"https:\/\/gist.github.com\/MoeRayo\/ed2ab83e1ed3aa03e101f49ed85c802a\">https:\/\/gist.github.com\/MoeRayo\/ed2ab83e1ed3aa03e101f49ed85c802a<\/a><\/p>\n<p>We achieved the following in the code snippet above:<\/p>\n<ul>\n<li>Imported the ticket JSON images from the <code>utils<\/code> folder and declared it in the data properties before using Cloudinary images components \u2014 <code>&lt;cld-image \/&gt;<\/code> and <code>&lt;cld-transformation \/&gt;<\/code> to render the images in the application<\/li>\n<li>Added a <code>click<\/code> function to the images rendered to show the active image<\/li>\n<li>Created a functional form to handle user input for the concert\u2019s title and artist\u2019s name<\/li>\n<li>Added an error message to prompt users to select an image and fill the input fields before submission<\/li>\n<li>Added a <code>data<\/code> property to manage the form data, error message, and other vital properties<\/li>\n<\/ul>\n<p>After this stage, our page should look like the image below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1654467199\/e-622f762c6cb5ad0068bc82c6\/wrslv2orh1bhg7aqzsl4.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"851\" height=\"522\"\/><\/p>\n<h2>Generating the concert ticket<\/h2>\n<p>To generate a concert ticket, we\u2019ll create a component that renders the generated concert ticket when the <code>handleSubmit<\/code> function linked to the \u201cGenerate Ticket\u201d button is clicked.<\/p>\n<p>We will create a file named <code>GeneratedConcertTicket.vue<\/code> in the <code>components<\/code> folder and add the code below to the file.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" 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>&gt;<\/span>\n  \n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-image<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"ref\"<\/span> <span class=\"hljs-attr\">:public-id<\/span>=<span class=\"hljs-string\">\"publicId\"<\/span>&gt;<\/span>\n    \n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"blur:150\"<\/span>\/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"brightness_hsb:-30\"<\/span>\/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">:overlay<\/span>=<span class=\"hljs-string\">\"{fontFamily: 'Metal Mania', fontSize: 60, fontWeight: 'bold', text: concertName, testAlign: 'center'}\"<\/span> <span class=\"hljs-attr\">color<\/span>=<span class=\"hljs-string\">\"#fff\"<\/span> <span class=\"hljs-attr\">opacity<\/span>=<span class=\"hljs-string\">\"90\"<\/span> <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"fit\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"550\"<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"shadow\"<\/span>\/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">flags<\/span>=<span class=\"hljs-string\">\"layer_apply\"<\/span>\/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">:overlay<\/span>=<span class=\"hljs-string\">\"{fontFamily: 'Courgette', fontSize: 15, fontWeight: 'bold', text: `Artist: ${artist}`}\"<\/span> <span class=\"hljs-attr\">color<\/span>=<span class=\"hljs-string\">\"#fff\"<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"shadow\"<\/span>  <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"fit\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"120\"<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">flags<\/span>=<span class=\"hljs-string\">\"layer_apply\"<\/span> <span class=\"hljs-attr\">gravity<\/span>=<span class=\"hljs-string\">\"south_east\"<\/span> <span class=\"hljs-attr\">x<\/span>=<span class=\"hljs-string\">\"150\"<\/span> <span class=\"hljs-attr\">y<\/span>=<span class=\"hljs-string\">\"80\"<\/span> \/&gt;<\/span>\n      \n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cld-image<\/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\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n  <span class=\"hljs-attr\">props<\/span>: {\n    <span class=\"hljs-attr\">concertName<\/span>: { \n      <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">String<\/span>, \n      <span class=\"hljs-attr\">required<\/span>: <span class=\"hljs-literal\">true<\/span> \n    },\n    <span class=\"hljs-attr\">artist<\/span>: { \n      <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">String<\/span>, \n      <span class=\"hljs-attr\">required<\/span>: <span class=\"hljs-literal\">true<\/span>\n    },\n    <span class=\"hljs-attr\">publicId<\/span>: { \n      <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">String<\/span>, \n      <span class=\"hljs-attr\">required<\/span>: <span class=\"hljs-literal\">true<\/span>\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-7\"><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>We achieved the following using the snippet above:<\/p>\n<ul>\n<li>Rendered the generated ticket using Cloudinary\u2019s <code>&lt;cld-image \/&gt;<\/code> and <code>&lt;cld-transformation \/&gt;<\/code>.<\/li>\n<li>Configured the Cloudinary components to accept the <code>concertName<\/code>, <code>artist<\/code>, and <code>publicId<\/code> as props.<\/li>\n<li>Cloudinary components support asset transformations, which we leveraged by blurring, changing the width, and cropping images. We also added text transformations like the font family and colors to achieve the desired ticket image.<\/li>\n<\/ul>\n<p>To render the <code>GeneratedConcertTicket.vue<\/code> component, in our view, we will need to import it into the <code>index.vue<\/code> file where it is conditionally rendered:<\/p>\n<p><a href=\"https:\/\/gist.github.com\/MoeRayo\/428a0ab260f1b477c8f68dda2928b1a6\">https:\/\/gist.github.com\/MoeRayo\/428a0ab260f1b477c8f68dda2928b1a6<\/a><\/p>\n<p>The <code>handleSubmit<\/code> method verifies whether an image is selected and if the concert title and artists were added before conditionally rendering the <code>GeneratedConcertTicket.vue<\/code> component with the expected props.<\/p>\n<p>At this stage, our application 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\/v1654467315\/e-622f762c6cb5ad0068bc82c6\/hd4qahqzcrl1zkpno58x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1232\" height=\"567\"\/><\/p>\n<h2>Creating a Shareable Link<\/h2>\n<p>To share the generated ticket, we will modify the <code>GeneratedConcertTicket.vue<\/code> component by adding functionality to create the image URL and a button that enables us to copy the URL.<\/p>\n<p>Thus, we\u2019ll add the following code in the <code>components\/GeneratedConcertTicket.vue<\/code>.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">\n<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>&gt;<\/span>\n\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-image<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"ref\"<\/span> <span class=\"hljs-attr\">:public-id<\/span>=<span class=\"hljs-string\">\"publicId\"<\/span>&gt;<\/span>\n  \n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"blur:150\"<\/span>\/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"brightness_hsb:-30\"<\/span>\/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">:overlay<\/span>=<span class=\"hljs-string\">\"{fontFamily: 'Metal Mania', fontSize: 60, fontWeight: 'bold', text: concertName, testAlign: 'center'}\"<\/span> <span class=\"hljs-attr\">color<\/span>=<span class=\"hljs-string\">\"#fff\"<\/span> <span class=\"hljs-attr\">opacity<\/span>=<span class=\"hljs-string\">\"90\"<\/span> <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"fit\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"550\"<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"shadow\"<\/span>\/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">flags<\/span>=<span class=\"hljs-string\">\"layer_apply\"<\/span>\/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">:overlay<\/span>=<span class=\"hljs-string\">\"{fontFamily: 'Courgette', fontSize: 15, fontWeight: 'bold', text: `Artist: ${artist}`}\"<\/span> <span class=\"hljs-attr\">color<\/span>=<span class=\"hljs-string\">\"#fff\"<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"shadow\"<\/span>  <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"fit\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"120\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">flags<\/span>=<span class=\"hljs-string\">\"layer_apply\"<\/span> <span class=\"hljs-attr\">gravity<\/span>=<span class=\"hljs-string\">\"south_east\"<\/span> <span class=\"hljs-attr\">x<\/span>=<span class=\"hljs-string\">\"150\"<\/span> <span class=\"hljs-attr\">y<\/span>=<span class=\"hljs-string\">\"80\"<\/span> \/&gt;<\/span>\n    \n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cld-image<\/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\">\"mv4\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"db mb2 f3 fw4 b\"<\/span>&gt;<\/span>Shareable link<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">disabled<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"db w-90 pv3 ph2 br2 ba b--black-40 f7\"<\/span> <span class=\"hljs-attr\">:value<\/span>=<span class=\"hljs-string\">\"url\"<\/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\">\"f6 link dim br2 ph3 pv2 db white bg-dark-green ba b--green mt2\"<\/span> @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"copyUrl\"<\/span>&gt;<\/span>{{share}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  \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\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n<span class=\"hljs-attr\">props<\/span>: {\n  <span class=\"hljs-attr\">concertName<\/span>: { \n    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">String<\/span>, \n    <span class=\"hljs-attr\">required<\/span>: <span class=\"hljs-literal\">true<\/span> \n  },\n  <span class=\"hljs-attr\">artist<\/span>: { \n    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">String<\/span>, \n    <span class=\"hljs-attr\">required<\/span>: <span class=\"hljs-literal\">true<\/span>\n  },\n  <span class=\"hljs-attr\">publicId<\/span>: { \n    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">String<\/span>, \n    <span class=\"hljs-attr\">required<\/span>: <span class=\"hljs-literal\">true<\/span>\n  },\n},\ndata() {\n  <span class=\"hljs-keyword\">return<\/span> {\n    <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n    <span class=\"hljs-attr\">share<\/span>: <span class=\"hljs-string\">'Share Link'<\/span>\n  };\n},\nmounted() {\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>.url = <span class=\"hljs-keyword\">this<\/span>.$refs.ref.$el.src\n  });\n},\n<span class=\"hljs-attr\">methods<\/span>: {\n  copyUrl(){\n    navigator.clipboard\n    .writeText(<span class=\"hljs-keyword\">this<\/span>.url)\n    .then(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> (<span class=\"hljs-keyword\">this<\/span>.share = <span class=\"hljs-string\">'Copied!'<\/span>))\n    .catch(<span class=\"hljs-function\">(<span class=\"hljs-params\">err<\/span>) =&gt;<\/span> err)\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-8\"><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>The code block above does the following:<\/p>\n<ul>\n<li>Adds a ref attribute to the <code>cld-image<\/code> component to access the <code>src<\/code> attribute of the rendered image in the DOM<\/li>\n<li>Creates a <code>url<\/code> in the <code>data<\/code> options, which is initialized to \u201cempty\u201d but gets updated with the image <code>src<\/code> value when the component is mounted<\/li>\n<li>Added a <code>copyUrl<\/code> method that copies the updated URL to the clipboard for easy sharing<\/li>\n<\/ul>\n<p>Our application, at this stage, 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\/v1654467389\/e-622f762c6cb5ad0068bc82c6\/kvilak1cbg9pm0kve8j8.gif\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"880\" height=\"368\"\/><\/p>\n<p>Click <a href=\"https:\/\/res.cloudinary.com\/moerayo\/image\/upload\/e_blur:150\/e_brightness_hsb:-30\/c_fit,co_rgb:fff,e_shadow,l_text:Metal%20Mania_60_bold:a%20night%20with%20made%20kuti%20%26%20the%20movement,o_90,w_550\/fl_layer_apply\/c_fit,co_rgb:fff,e_shadow,l_text:Courgette_15_bold:Artist:%20Made%20Kuti%252C%20Lojay,w_120\/fl_layer_apply,g_south_east,x_150,y_80\/ayoola-salako-unsplash\">here<\/a> to find the shareable link from the generated concert ticket.<\/p>\n<h2>Conclusion<\/h2>\n<p>This post explains creating a custom summer concert ticket using Nuxt.js and Cloudinary transformations.<\/p>\n<h2>Resources<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.nuxtjs.org\/\">Cloudinary-nuxt<\/a>\n<\/li>\n<li>Vue Cloudinary image transformation<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28156,"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-28155","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 Custom Summer Concert Tickets in NuxtJS<\/title>\n<meta name=\"description\" content=\"Learn how to create a concert ticket generator in Nuxt.Js Using Cloudinary images and transformations.\" \/>\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-custom-summer-concert-tickets-in-nuxtjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Custom Summer Concert Tickets in NuxtJS\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a concert ticket generator in Nuxt.Js Using Cloudinary images and transformations.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-10T07:57:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-26T20:45:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925278\/Web_Assets\/blog\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc.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-custom-summer-concert-tickets-in-nuxtjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Create Custom Summer Concert Tickets in NuxtJS\",\"datePublished\":\"2022-06-10T07:57:17+00:00\",\"dateModified\":\"2025-09-26T20:45:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925278\/Web_Assets\/blog\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc.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-custom-summer-concert-tickets-in-nuxtjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/\",\"name\":\"Create Custom Summer Concert Tickets in NuxtJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925278\/Web_Assets\/blog\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc.png?_i=AA\",\"datePublished\":\"2022-06-10T07:57:17+00:00\",\"dateModified\":\"2025-09-26T20:45:22+00:00\",\"description\":\"Learn how to create a concert ticket generator in Nuxt.Js Using Cloudinary images and transformations.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925278\/Web_Assets\/blog\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925278\/Web_Assets\/blog\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc.png?_i=AA\",\"width\":886,\"height\":550},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Custom Summer Concert Tickets 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":"Create Custom Summer Concert Tickets in NuxtJS","description":"Learn how to create a concert ticket generator in Nuxt.Js Using Cloudinary images and transformations.","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-custom-summer-concert-tickets-in-nuxtjs\/","og_locale":"en_US","og_type":"article","og_title":"Create Custom Summer Concert Tickets in NuxtJS","og_description":"Learn how to create a concert ticket generator in Nuxt.Js Using Cloudinary images and transformations.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-10T07:57:17+00:00","article_modified_time":"2025-09-26T20:45:22+00:00","og_image":[{"width":886,"height":550,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925278\/Web_Assets\/blog\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc.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-custom-summer-concert-tickets-in-nuxtjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/"},"author":{"name":"","@id":""},"headline":"Create Custom Summer Concert Tickets in NuxtJS","datePublished":"2022-06-10T07:57:17+00:00","dateModified":"2025-09-26T20:45:22+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925278\/Web_Assets\/blog\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc.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-custom-summer-concert-tickets-in-nuxtjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/","name":"Create Custom Summer Concert Tickets in NuxtJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925278\/Web_Assets\/blog\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc.png?_i=AA","datePublished":"2022-06-10T07:57:17+00:00","dateModified":"2025-09-26T20:45:22+00:00","description":"Learn how to create a concert ticket generator in Nuxt.Js Using Cloudinary images and transformations.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925278\/Web_Assets\/blog\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925278\/Web_Assets\/blog\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc.png?_i=AA","width":886,"height":550},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-summer-concert-tickets-in-nuxtjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Custom Summer Concert Tickets 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\/v1681925278\/Web_Assets\/blog\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc\/9c7bff268273838e481d2c26e7006208374e63b4-886x550-1_281569f2cc.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28155","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=28155"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28155\/revisions"}],"predecessor-version":[{"id":38613,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28155\/revisions\/38613"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28156"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}