How To Embed Youtube In Nuxt Website Via Markdown File
Tags: javascript, vue, webdev
Published: 2022-09-27 08:39:34

---
title: How To Embed Youtube In Nuxt Website Via Markdown File
published: true
date: 2022-09-20 11:26:44 UTC
tags: JavaScript, Vue, WebDev
canonical_url: https://byrayray.dev/posts/2022-09-20-embed-youtube-nuxt-website-via-markdown
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jidjm3sl1cx53hvs18w5.jpg
---

Embedding Youtube in a blog build with Nuxt has never been easier. Include the `lite-youtube-embed` package, create a Nuxt plugin and component, and you can use it in all your Markdown content files.

In this post, I will show you how you can do it yourself. We follow the following steps:

1. Include the Youtube Lite package
2. Add plugin
3. Create Component
4. Use component in the Markdown file

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## 1. Include Youtube Lite package

First, we need to install the npm package [lite-youtube-embed](https://www.npmjs.com/package/lite-youtube-embed), created by Google Chrome team member and Frontend Developer [Paul Irish](https://www.paulirish.com/) 💪. This package is built for embedding Youtube videos with better performance than the "normal" way.

But I don't want to dive into the performance bottlenecks of embedding Youtube players on your blog. I want to show you how you can implement a Youtube player in your Markdown files with Nuxt.

Run this command to install it in your Nuxt project.

```
yarn add lite-youtube-embed

```

Or

```
npm i lite-youtube-embed

```

Add the CSS file in your `nuxt.config.js` into the `css` property.

[https://gist.github.com/devbyray/ba094f0b488ac5152f00b5efd36d4dff](https://gist.github.com/devbyray/ba094f0b488ac5152f00b5efd36d4dff)

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## 2. Add plugin

Create a plugin file `youtube.client.js` into your plugins folder. Make sure you include `.client.js` in the name, so Nuxt will only load this in the browser. We also need to import the JavaScript library, of course.

[https://gist.github.com/devbyray/6ee03592419349b6a664fc2536a5620e](https://gist.github.com/devbyray/6ee03592419349b6a664fc2536a5620e)

Now you need to register this plugin in your `nuxt.config.js` like below.

[https://gist.github.com/devbyray/3e8ab7649b7d1cbee387c8bba4019733](https://gist.github.com/devbyray/3e8ab7649b7d1cbee387c8bba4019733)

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## 3. Create Component

To use the `<lite-youtube>` web component in your Markdown files, you must create a Vue component to wrap it. Otherwise, you won't be able to show it on the page.

I created a `Youtube.vue` component in the `components` folder. I added two props to pass the Youtube video ID and a label.

[https://gist.github.com/devbyray/7667b330b483c40b28f2bf9eb5a8b7cb](https://gist.github.com/devbyray/7667b330b483c40b28f2bf9eb5a8b7cb)

With this Youtube component, you can start using it in your Markdown files.

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## 4. Use component in Markdown file

So the question is, how to use it in your Markdown files?

Add it into your files like you usually would do with your Vue components.

[https://gist.github.com/devbyray/3e2085fcec376d81a022b8552d07e0d6](https://gist.github.com/devbyray/3e2085fcec376d81a022b8552d07e0d6)

Nuxt will magically turn your whole Markdown file into a page of HTML, which you can see in the browser like this.

![Screenshot Youtube Video player embed](https://cdn.hashnode.com/res/hashnode/image/upload/v1663672364534/v0Y7mUNjd.png)

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## Thanks!

![hashnode-footer.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629789655319/nBF6anHH4w.png)_After reading this story, I hope you learned something new or are inspired to create something new! 🤗 If so, consider subscribing via email (scroll to the top of this page) or follow me here on Hashnode._

> Did you know that you can create a [Developer blog like this one, yourself](https://hashnode.com/@devbyrayray/joinme)? It's entirely for free. 👍💰🎉🥳🔥

_If I left you with questions or something to say as a response, scroll down and type me a message. Please send me a [DM on Twitter @DevByRayRay](https://twitter.com/@devbyrayray) when you want to keep it private. My DM's are always open 😁_