{"id":28409,"date":"2022-07-07T06:03:56","date_gmt":"2022-07-07T06:03:56","guid":{"rendered":"http:\/\/simulate-a-streaming-event-in-nuxtjs"},"modified":"2025-09-26T14:00:21","modified_gmt":"2025-09-26T21:00:21","slug":"simulate-a-streaming-event-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/","title":{"rendered":"Simulate a Streaming Event in NuxtJS"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>YouTube is an essential piece of popular culture, with the addition of the live events feature consolidating that fact. Live events allow people from all over the world to watch videos in real-time.<\/p>\n<p>In this tutorial, we will be walking through creating a YouTube live-event simulator in Nuxt.<\/p>\n<h2>What we will be building<\/h2>\n<p>Similar to live YouTube events, our video starting mark for a user is adjusted based on how much time has passed since the video started. For example, a video that is 1 hour long but started 45 minutes ago would have any new user that visits the page automatically begin at the 45-minute mark in the video time.<\/p>\n<p>When the recorded video is complete, we want an overlay with the text \u2018The live has ended\u2019.<\/p>\n<h3>CodeSandbox<\/h3>\n<p>We completed the project in a CodeSandbox. To get started quickly, fork the <a href=\"https:\/\/codesandbox.io\/s\/nuxt-js-live-events-x4if5\">CodeSandbox<\/a>.<\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/nuxt-js-live-events-x4if5?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=\"Code Sandbox\"\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 \"><h3>GitHub Repository:<\/h3>\n<p><a href=\"https:\/\/github.com\/Iheanacho-ai\/nuxtjs-live-events\">https:\/\/github.com\/Iheanacho-ai\/nuxtjs-live-events<\/a><\/p>\n<h2>Prerequisites<\/h2>\n<p>To get the most out of this article, we require the following:<\/p>\n<ul>\n<li>A basic understanding of CSS, JavaScript, and Vue.js<\/li>\n<li>Node and its package manager, <code>npm<\/code>. Run the command <code>node -v<\/code> &amp;&amp; <code>npm -v<\/code> to verify we have them installed, or install them from here. We recommended the latest version. Alternatively, we can use another package manager, Yarn.<\/li>\n<li>Understanding Nuxt would help us follow this tutorial quicker, but it is not entirely required.<\/li>\n<li>A Cloudinary account, create a free account here.<\/li>\n<\/ul>\n<h2>Setting up the Nuxt app<\/h2>\n<p><a href=\"https:\/\/nuxtjs.org\/\">Nuxt<\/a> is an open-source vue.js frontend development framework that allows us to seamlessly create web applications. The rendered web pages are static Vue.js applications without a server.<\/p>\n<p>We navigate to the preferred directory to create our Nuxt app and run this terminal command.<\/p>\n<p><strong>NOTE: Use the PowerShell terminal to avoid arrow issues on Windows.<\/strong><\/p>\n<pre class=\"js-syntax-highlighted\"><code>    npm init nuxt-app &lt;project-name&gt;\n    \n    #or\n    \n    npx create-nuxt-app &lt;project-name&gt;\n    \n    #or\n    \n    yarn create nuxt-app &lt;project-name&gt;\n\n<\/code><\/pre>\n<p>Running this command will trigger a set of question prompts and we recommend the following defaults.<\/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_F22DDC6F8A9E63BACED9FA7A7E011649B13CCD6D40585994C06044C0C3C992F2_1642624609920_questions-3.PNG\" alt=\"Nuxt question prompt\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"727\" height=\"211\"\/><\/p>\n<p>Next, we change the directory to the project and start a development server with:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    cd &lt;project name&gt;\n    \n    npm run dev\n    \n    #or\n    \n    yarn dev\n\n<\/code><\/pre>\n<p>To see our app, go to <a href=\"http:\/\/localhost:3000\/\">http:\/\/localhost:3000\/<\/a><\/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_F22DDC6F8A9E63BACED9FA7A7E011649B13CCD6D40585994C06044C0C3C992F2_1642624646362_nuxtjs-index.PNG\" alt=\"Nuxt indexjs\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1600\" height=\"738\"\/><\/p>\n<h2>Installing the Cloudinary dependency<\/h2>\n<p><a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> is a cloud-based service that provides an end-to-end image and video management solution, including uploads, storage, manipulations, optimizations, and delivery.<\/p>\n<p>To enable the Nuxt app to use these Cloudinary features, we will add the video player assets in the <code>head<\/code> section of the <code>nuxt.config.js<\/code> file in the root directory.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    \/\/ nuxt.config.js\n    \n    export  default  {\n        head:  {\n        ...\n          link: [\n            ...\n            { rel:  'stylesheet', href:  'https:\/\/unpkg.com\/cloudinary-video-player@1.5.9\/dist\/cld-video-player.min.css'  }\n          ],\n          script:  [\n            { src:  'https:\/\/unpkg.com\/cloudinary-core@latest\/cloudinary-core-shrinkwrap.min.js'  },\n            { src:  'https:\/\/unpkg.com\/cloudinary-video-player@1.5.9\/dist\/cld-video-player.min.js'  },\n          ],\n        },\n    \n    };\n\n<\/code><\/pre>\n<p>Next up, we create a <code>.env<\/code>  file at the root of the project to store environment variables.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>touch .env\n\n<\/code><\/pre>\n<p>After creating the <code>.env<\/code> file, we go to our Cloudinary Dashboard, in the Account Details section, we copy and paste our Cloud Name in our <code>.env<\/code> file.<\/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_B4912DE0567DC98FA910B61B7A50D0E312C19031E3393E5E37254A62EAE2D21E_1648732890499_Screenshot+92-1.png\" alt=\"Cloudinary Dashboard\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1920\" height=\"1080\"\/><\/p>\n<pre class=\"js-syntax-highlighted\"><code>    CLOUD_NAME = &lt;Cloudinary-cloud-name&gt;\n\n<\/code><\/pre>\n<h2>Creating the video player<\/h2>\n<p>In the <code>index.vue<\/code> file, we embed the Cloudinary video player in our project using the native HTML5 <code>video<\/code> element.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;template&gt;\n   &lt;div&gt;\n     &lt;video \n     id= &quot;video-player&quot;\n     class=&quot;cld-video-player&quot;\n     &gt;\n     &lt;\/video&gt; \n   &lt;\/div&gt;\n &lt;\/template&gt;\n\n<\/code><\/pre>\n<p>In Vue\u2019s <code>mounted<\/code> lifecycle hook, we create a Cloudinary instance. Doing this in the mounted lifecycle hook allows the instance to be created once the app mounts.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    \/\/ pages\/index.vue\n    \n   \n&lt;script&gt;\n    \n    export default {\n      data(){\n        return{\n          cld: null,\n          player: null,\n          video: &quot;videoplayback_1_pr2hzi&quot;,\n          controls: true\n        }\n      },\n      mounted(){\n        this.cld= cloudinary.Cloudinary.new({\n          cloud_name:  process.env.CLOUD_NAME,\n          secure:  true\n        })\n        this.player = this.cld.videoPlayer(\n          'video-player', {\n              controls: this.controls,\n              autoplay: true\n          }\n        );\n        this.player.source(this.video);\n    }\n    \n    }\n    \n    \n    &lt;\/script&gt;\n<\/code><\/pre>\n<p>We define four variables in our <code>data<\/code> object:<\/p>\n<ul>\n<li>The <code>cld<\/code> variable holds the Cloudinary instance we will create.<\/li>\n<li>The <code>player<\/code> variable holds the Cloudinary video player we will instantiate on mount.<\/li>\n<li>The <code>video<\/code> variable holds the video\u2019s public ID.<\/li>\n<li>The <code>controls<\/code> variable controls the native player controls.<\/li>\n<\/ul>\n<p>In our mounted lifecycle hook, we create a Cloudinary instance by passing the cloud name we stored in our <code>.env<\/code> file and <code>secure: true<\/code> into the Cloudinary object.<\/p>\n<p>Following that, we instantiate the video player with the Cloudinary <code>videoPlayer<\/code> method. This method receives two arguments.<\/p>\n<ul>\n<li>The <code>video<\/code> element ID.<\/li>\n<li>An object that sets our <code>autoplay<\/code> to true and the <code>controls<\/code> to the <code>controls<\/code> variable.<\/li>\n<\/ul>\n<p>Now that we have created our player, we specify what video to play using the Cloudinary <code>source()<\/code> method.<\/p>\n<p>Next, we add our video player styles in the <code>style<\/code> section of our <code>index.vue<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;style scoped&gt;\n      div{\n        margin: 0;\n        padding: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .cld-video-player{\n        width: 500px;\n        height: 500px;\n      }\n    &lt;\/style&gt;\n\n<\/code><\/pre>\n<p>Our <code>index.vue<\/code> file should look like the code block  below when we have completed this tutorial section.<\/p>\n<p><a href=\"https:\/\/gist.github.com\/Iheanacho-ai\/3502dc3cf41e9a66f44bbd5ad6f21768\">https:\/\/gist.github.com\/Iheanacho-ai\/3502dc3cf41e9a66f44bbd5ad6f21768<\/a><\/p>\n<p>Here is the embedded Cloudinary video player.<\/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_B4912DE0567DC98FA910B61B7A50D0E312C19031E3393E5E37254A62EAE2D21E_1642977409431_nuxtjs-live.gif\" alt=\"Cloudinary Video Player\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"480\" height=\"258\"\/><\/p>\n<h2>Creating the live simulation<\/h2>\n<p>To have the video starting time mark adjusted on how much time has passed, we need to subtract the video\u2019s starting time from when the user visits the page.<\/p>\n<p>In our <code>index.vue<\/code> file, we create four variables on the data object  to simulate the live event. These variables are:<\/p>\n<ul>\n<li>The <code>duration<\/code> variable is how long our video is in seconds.<\/li>\n<li>The <code>startTime<\/code> variable holds the time in milliseconds our video starts playing. To get the start time, we use the JavaScript <code>getTime()<\/code> method.<\/li>\n<li>The <code>currentTime<\/code> variable is the time in milliseconds the user visits the webpage.<\/li>\n<li>The <code>liveStartTime<\/code> variable holds the difference between the <code>startTime<\/code> variable and the <code>currentTime<\/code> variable in seconds. This <code>liveStartTime<\/code> variable sets the seconds mark from which the user starts watching the video.<\/li>\n<\/ul>\n<pre class=\"js-syntax-highlighted\"><code>export default {\n      data(){\n          return{\n            cld: null,\n            player: null,\n            video: &quot;videoplayback_1_pr2hzi&quot;,\n            duration: null,\n            startTime: 1642870132613,\n            currentTime: null,\n            liveStartTime: null,\n          }\n        },\n    }\n<\/code><\/pre>\n<p>In our <code>index.vue<\/code> file, we create the functions that will affect the <code>duration<\/code>, <code>currentTime<\/code>, and the <code>liveStartTime<\/code> variables.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>      mounted(){\n        this.cld= cloudinary.Cloudinary.new({\n          cloud_name:  &quot;amarachi-2812&quot;,\n          secure:  true\n        })\n        this.player = this.cld.videoPlayer(\n          'video-player', {\n            controls: this.controls,\n            autoplay: true\n          }\n        )\n        this.player.source(this.video);\n    \n        \/\/ Gets the duration of the video\n        this.player.on('loadeddata', () =&gt; {\n          this.duration = this.player.duration(); \n        })\n        \/\/ Gets the current time at which the user opens the video\n        const d = new Date ()\n        this.currentTime = d.getTime();\n        \/\/ Gets the difference betwewn when the user opened the video and when the video started\n        const difference = this.currentTime - this.startTime\n        \/\/ Changes the time from millisecond to seconds.\n        this.liveStartTime = difference \/ 1000;\n        \n    }\n<\/code><\/pre>\n<p>In the code block above, we do the following:<\/p>\n<ul>\n<li>Update the <code>duration<\/code> variable with the video\u2019s duration after loading our video data.<\/li>\n<li>Update the <code>currentTime<\/code> variable with the date and time in milliseconds a user opens our app.<\/li>\n<li>Update the <code>liveStartTime<\/code> variable with the difference between the <code>startTime<\/code> and the <code>currentTime<\/code> variable in seconds.<\/li>\n<\/ul>\n<p>Next, we set the time mark the video starts playing for a user.<\/p>\n<pre class=\"js-syntax-highlighted\"><code> \/\/ Plays the video from a particular time\n    \n     this.player.on('play', ()=&gt; {\n      this.player.currentTime(this.liveStartTime);\n    })\n\n<\/code><\/pre>\n<p>We use the Cloudinary <code>currentTime<\/code> method to set the video starting mark anytime we call the <code>play<\/code> video event in the code block above.<\/p>\n<h2>Creating the overlay and selectively rendering it.<\/h2>\n<p>We create our overlay in the <code>template<\/code> section of our <code>index.vue<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;div class=&quot;overlay&quot;&gt;\n       The live has ended. \n    &lt;\/div&gt;\n\n<\/code><\/pre>\n<p>Our overlay is incomplete without the styling. We add these styles in the <code>style<\/code> section of our <code>index.vue<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;style scoped&gt;\n    \n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@300&amp;display=swap');\n    \n    h2{\n      font-size: 20px\n    }\n    .overlay{\n      width: 500px;\n      height: 500px;\n      position: absolute;\n      background-color: rgba(0,0,0, 0.70);\n      color: #fff;\n      font-size: 16px;\n      top: 7px;\n      bottom: 0px;\n    }\n    &lt;\/style&gt;\n\n<\/code><\/pre>\n<h2>Selectively rendering the overlay.<\/h2>\n<p>We create an <code>overlay<\/code> variable in the <code>index.vue<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>data(){\n      return{\n        ...\n        overlay: false\n      }\n    }\n\n<\/code><\/pre>\n<p>Next, in the template section of our <code>index.vue<\/code> file, we use this <code>overlay<\/code> variable to conditionally render the overlay.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    &lt;div class=&quot;overlay&quot;  v-if = 'overlay'&gt;\n       The live has ended. \n    &lt;\/div&gt;\n<\/code><\/pre>\n<p>In our <code>index.vue<\/code>  file, we create an <code>onEnded<\/code> function on the <code>method<\/code> object. This function changes our <code>overlay<\/code>  variable to <code>true<\/code> and our <code>controls<\/code> variable to <code>false<\/code>.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>export default {\n   data() {\n     return {\n       ...\n     };\n   },\n   methods: {\n     onEnded() {\n       this.overlay = true;\n       this.controls = false;\n     },\n   },\n   mounted() {\n     ...\n   },\n };\n\n<\/code><\/pre>\n<p>In the <code>mounted<\/code> section of our <code>index.vue<\/code> we write this code.<\/p>\n<pre class=\"js-syntax-highlighted\"><code> \/\/ Controls the overlay\n    this.player.on('ended', ()=&gt; {\n      this.onEnded()\n    })\n    \n    if (this.liveStartTime &gt; this.duration){\n      this.onEnded()\n    }\n<\/code><\/pre>\n<p>The code block above does the following:<\/p>\n<ul>\n<li>Call the <code>onEnded<\/code> function when the video ends.<\/li>\n<li>Checks if the <code>liveStartTime<\/code> variable is greater than the <code>duration<\/code> . If it is, we call the <code>onEnded<\/code> function.<\/li>\n<\/ul>\n<p>Finally, we set our <code>overlay<\/code> variable to false when we start playing the media.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    this.player.on(&quot;play&quot;, () =&gt; {\n      this.player.currentTime(this.liveStartTime);\n      this.overlay = false;\n    });\n<\/code><\/pre>\n<p>Here is how our <code>index.js<\/code> file looks.<\/p>\n<p><a href=\"https:\/\/gist.github.com\/Iheanacho-ai\/e3940e40a680981c1241d625773e1338\">https:\/\/gist.github.com\/Iheanacho-ai\/e3940e40a680981c1241d625773e1338<\/a><\/p>\n<p>Here is how our live event simulator looks.<\/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_B4912DE0567DC98FA910B61B7A50D0E312C19031E3393E5E37254A62EAE2D21E_1648712251580_live-event.gif\" alt=\"Nuxtjs Live event simulator\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"480\" height=\"258\"\/><\/p>\n<p>We can update the livestream start time in the code to simulate the playback in any time.<\/p>\n<h2>Conclusion<\/h2>\n<p>This article discussed what Cloudinary is and how to handle player events with it to simulate a live event.<\/p>\n<h2>Resources<\/h2>\n<p>Here are some resources that might be helpful:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/video_player_how_to_embed\">How to embed the Cloudinary Video Player\n<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/video_player_api_reference\">Cloudinary Video Player API Reference\n<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28410,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,145,175,372,371,303],"class_list":["post-28409","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-html5","tag-jamstack","tag-nuxtjs","tag-under-review","tag-video"],"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>Simulate a Streaming Event in NuxtJS<\/title>\n<meta name=\"description\" content=\"Live events are a great way to pass information in real time. This article discusses how to simulate live events in Nuxt.\" \/>\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\/simulate-a-streaming-event-in-nuxtjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simulate a Streaming Event in NuxtJS\" \/>\n<meta property=\"og:description\" content=\"Live events are a great way to pass information in real time. This article discusses how to simulate live events in Nuxt.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-07T06:03:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-26T21:00:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924268\/Web_Assets\/blog\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"6016\" \/>\n\t<meta property=\"og:image:height\" content=\"4016\" \/>\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\/simulate-a-streaming-event-in-nuxtjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Simulate a Streaming Event in NuxtJS\",\"datePublished\":\"2022-07-07T06:03:56+00:00\",\"dateModified\":\"2025-09-26T21:00:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924268\/Web_Assets\/blog\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"HTML5\",\"JAMStack\",\"NuxtJS\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/\",\"name\":\"Simulate a Streaming Event in NuxtJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924268\/Web_Assets\/blog\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542.jpg?_i=AA\",\"datePublished\":\"2022-07-07T06:03:56+00:00\",\"dateModified\":\"2025-09-26T21:00:21+00:00\",\"description\":\"Live events are a great way to pass information in real time. This article discusses how to simulate live events in Nuxt.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924268\/Web_Assets\/blog\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924268\/Web_Assets\/blog\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542.jpg?_i=AA\",\"width\":6016,\"height\":4016},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Simulate a Streaming Event 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":"Simulate a Streaming Event in NuxtJS","description":"Live events are a great way to pass information in real time. This article discusses how to simulate live events in Nuxt.","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\/simulate-a-streaming-event-in-nuxtjs\/","og_locale":"en_US","og_type":"article","og_title":"Simulate a Streaming Event in NuxtJS","og_description":"Live events are a great way to pass information in real time. This article discusses how to simulate live events in Nuxt.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-07-07T06:03:56+00:00","article_modified_time":"2025-09-26T21:00:21+00:00","og_image":[{"width":6016,"height":4016,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924268\/Web_Assets\/blog\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542.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\/simulate-a-streaming-event-in-nuxtjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/"},"author":{"name":"","@id":""},"headline":"Simulate a Streaming Event in NuxtJS","datePublished":"2022-07-07T06:03:56+00:00","dateModified":"2025-09-26T21:00:21+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924268\/Web_Assets\/blog\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542.jpg?_i=AA","keywords":["Guest Post","HTML5","JAMStack","NuxtJS","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/","name":"Simulate a Streaming Event in NuxtJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924268\/Web_Assets\/blog\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542.jpg?_i=AA","datePublished":"2022-07-07T06:03:56+00:00","dateModified":"2025-09-26T21:00:21+00:00","description":"Live events are a great way to pass information in real time. This article discusses how to simulate live events in Nuxt.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924268\/Web_Assets\/blog\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924268\/Web_Assets\/blog\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542.jpg?_i=AA","width":6016,"height":4016},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/simulate-a-streaming-event-in-nuxtjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Simulate a Streaming Event 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\/v1681924268\/Web_Assets\/blog\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542\/96949f2c815536544208369e705b666525eff611-6016x4016-1_2841020542.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28409","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=28409"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28409\/revisions"}],"predecessor-version":[{"id":38621,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28409\/revisions\/38621"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28410"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}