Nuxt > Displaying videos

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:

<template>
<div>
<div v-if="loading">
Loading...
</div>
<div v-else-if="error">
Something bad happened!
</div>
<div v-else>
<article v-for="blogPost of data.allBlogPosts" v-bind:key="blogPost.id">
<h6>{{blogPost.title}}</h6>
<video-player :data="blogPost.coverVideo.video" />
</article>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { VideoPlayer } from "vue-datocms";
import { request } from "./datocms";
const data = ref(null);
const error = ref(null);
const loading = ref(true);
const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {
allBlogPosts(first: $limit) {
id
title
coverVideo {
video {
muxPlaybackId
title
width
height
blurUpThumb
}
}
}
}`;
onMounted(async () => {
try {
data.value = await request({
query: HOMEPAGE_QUERY,
variables: {
limit: 10
}
});
} catch (e) {
error.value = e;
}
loading.value = false;
})
</script>