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:

1
<script setup>
2
import { VideoPlayer } from "vue-datocms";
3

4
const QUERY = `query HomePage($limit: IntType) {
5
  allBlogPosts(first: $limit) {
6
    id
7
    title
8
    coverVideo {
9
      video {
10
        muxPlaybackId
11
        title
12
        width
13
        height
14
        blurUpThumb
15
      }
16
    }
17
  }
18
}`;
19

20
const { data } = await useQuery(QUERY);
21
</script>
22

23
<template>
24
  <div v-if="data">
25
    <article v-for="blogPost of data.allBlogPosts" v-bind:key="blogPost.id">
26
      <h6>{{blogPost.title}}</h6>
27
      <VideoPlayer :data="blogPost.coverVideo.video" />
28
    </article>
29
  </div>
30
</template>