Как встроить Youtube в сайт на Nuxt используя Markdown

Встраивать Youtube в блог с Nuxt еще никогда не было так просто. Подключите к нему пакет lite-youtube-embed, создайте плагин и компонент Nuxt, и все. Дальше вы сможете использовать этот компонент во всех своих Markdown файлах.

1. Установливаем lite-youtube-embed

Сначала нам нужно установить npm-пакет lite-youtube-embed, созданный членом команды Google Chrome и разработчиком фронтенда Полом Айришем. Этот пакет предназначен для вставки видео с Youtube с улучшенной производительностью по сравнению с " обычным" способом.

Я не хочу углубляться в проблемы производительности при встраивании Youtube-плееров в ваш блог. Я хочу показать вам, как вы можете внедрить Youtube-плеер в ваши Markdown-файлы с использованием Nuxt.

Выполняем в папке с проектом следующую команду.

1

yarn add lite-youtube-embed

или

1

npm i lite-youtube-embed

Подключите CSS-файл к свойству css в файле nuxt.config.js.

1
2
3
4
5

export default {
  css: [
        'node_modules/lite-youtube-embed/src/lite-yt-embed.css'
    ]
}

2. Создаем плагин

Создайте файл плагина youtube.client.js в папке plugins. Убедитесь, что в его названии присутствует .client.js, чтобы Nuxt загружал его только в браузере. Записываем в него следующее.

1

import 'lite-youtube-embed'

Теперь вам нужно зарегистрировать этот плагин в файле nuxt.config.js, как показано ниже.

1
2
3

export default {
  plugins: ['@/plugins/youtube.client.js']
}

3. Создаем компонент

Чтобы использовать компонент <lite-youtube> в файлах Markdown, необходимо создать Vue компонент для его отображения. В ином случае вы не сможете его использовать на странице.

Я создал компонент Youtube.vue в папке components.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<template>
    <div class="youtube">
        <lite-youtube
            :videoid="id"
            :playlabel="label"
        />
    </div>
</template>
<script>
    export default {
        props: {
            id: String,
            label: String,
        },
        fetchOnServer: false,
    }
</script>

Создав данный компонент, вы можете начать использовать его в своих Markdown-файлах.

4. Используем наш компонент

Возникает вопрос, как использовать его в ваших Markdown-файлах?

Добавьте его в файлы, как вы обычно делаете это с компонентами Vue.

1

<youtube id="5SR_NUdg7t8"></youtube>

Nuxt волшебным образом превратит весь ваш Markdown-файл в HTML-страницу, которую вы сможете увидеть в браузере.

Оригинал

Photo by Mohammad Rahmani on Unsplash