Vue.js > Display videos in Vue.js

    Display videos in Vue.js

    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:

    <div v-if="loading">
    <div v-else-if="error">
    Something bad happened!
    <div v-else>
    <article v-for="blogPost of data.allBlogPosts" v-bind:key="">
    <video-player :data="" />
    <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) {
    coverVideo {
    video {
    onMounted(async () => {
    try {
    data.value = await request({
    query: HOMEPAGE_QUERY,
    variables: {
    limit: 10
    } catch (e) {
    error.value = e;
    loading.value = false;