Nuxt > Displaying videos

One of the advantages of using DatoCMS instead of other content management systems is its video query, which will return pre-computed video attributes that will help you display videos in your frontend without any additional manipulation.

To make it easy to offer optimized, progressive videos on your projects, we offer a package called vue-datocms that exposes a <VideoPlayer /> component and pairs perfectly with the video query.

To take advantage of it, install the vue-datocms package:

npm install vue-datocms

Then, inside your page, feed content coming from a video query directly into the <VideoPlayer /> component:

<script setup>
import { VideoPlayer } from "vue-datocms";
const QUERY = `query HomePage($limit: IntType) {
  allBlogPosts(first: $limit) {
    id
    title
    coverVideo {
      video {
        muxPlaybackId
        title
        width
        height
        blurUpThumb
      }
    } 
  }
}`;
const { data } = await useQuery(QUERY);
</script>
<template>
  <div v-if="data">
    <article v-for="blogPost of data.allBlogPosts" v-bind:key="blogPost.id">
      <h6>{{blogPost.title}}</h6>
      <VideoPlayer :data="blogPost.coverVideo.video" />
    </article>
  </div>
</template>