Nuxt

Displaying videos

Pro tip: Start with our how-to guides first

If you're new to hosting videos on DatoCMS, we recommend first starting with our tutorials:

How to upload videos: Videos and Video Optimizations
Why you should use HLS Streaming via Mux: How to stream videos efficiently: Raw MP4 Downloads vs HLS Streaming

Then, this page provides framework-specific playback advice using our helper components. Read on when you're ready!

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>