Nuxt Starter Kit
Words are nice... but code speaks louder. Dive into a fully commented project template, showcasing these techniques (and more) in action.
Sorry, no results found for "".
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-datocmsThen, 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>