Adding Videos

This is a premium course, which you can purchase below.

Buy Now

I took a small break and edited the first set of videos - I wanted to get an idea of pace! Now let's get to the heart of the matter: videos!


We've made our way through the first big hurdle, dealing with state management properly. Now let's add a video with lesson text, along with next/previous commands.

Quick Checkin

I just edited the first 9 videos...

  • Going to keep a quicker pace, less explaining
  • My process and why I'm hitting errors
  • GitHub
  • Copilot?

The video component

We'll be using Vimeo to serve our videos, but to start off we'll use a test video (Big Buck Bunny). Along the way, we'll need to be sure...

  • Things layout the way we want
  • A slide is shown in place of the video when a user isn't logged in

The page text, with syntax highlighting

Our videos will need context, including code samples! Let's see how we can add styling:

  • The interesting way: using Nuxt Typography
  • Our way: using the built-in Shiki code highlighter

Next/Previous commands

Every video app needs a next/previous! We'll add ours without overthinking things.

  • Add the buttons to a bottom bar
  • Use findSurround to get the next and previous pages
  • Use our own sorting method to see which we like more.