Nuxt Youtube Subscribe Module

Youtube Subscribe integration for Nuxt.js. You could add the official subscribe button to the desired Youtube channel.

This nuxt module is a simple wrapper of the official Youtube Subscribe Button.

✍🏻 Motivation

This module is the result of the need of add a Youtube subscribe button in one of my multiple web applitacions. After google it I only was able to find the official Youtube Subscribe Button, but it only works well in simple JS applications or fullstack ones made with CMS like WordPress, Drupal and more.

As I didn't find any solution for vue apps, I decided to develop this module for nuxt because is the Vue framework I am using majority.

I hope this module be very usefull for so many people with same need than me.

🧱 Install

You must add nuxt-youtube-subscribe-module dependency using yarn or npm to your project

$ npm install nuxt-youtube-subscribe-module --save

or

$ yarn add nuxt-youtube-subscribe-module

⚙️ Config

You have to add nuxt-youtube-subscribe-module to modules section of nuxt.config.js

// nuxt.config.js
{
  ...,
  modules: [
    'nuxt-youtube-subscribe-module'.
  ],
  ...,
}

If you want to use the module options you have two ways of doing this:

// nuxt.config.js
// Simple usage
{
  ...,
  modules: [
    ['nuxt-youtube-subscribe-module', {
      tag: 'YoutubeSubscribeButton'
    }]
  ],
  ...,
}

// nuxt.config.js
// Using top level options
{
  ...,
  modules: [
    'nuxt-youtube-subscribe-module'
  ],
  ...,
  'youtube-subscribe': {
    tag: 'YoutubeSubscribeButton'
  },
  ...,
}

Configuration options

▶️ Usage

For using this module you only have to add the <youtube-subscribe-button> tag in the desired location.

Example 1: Same that official docs shows by default

<!-- view.html -->
<youtube-subscribe-button
  identifier="my-subscribe-button"
  channel="GoogleDevelopers"
></youtube-subscribe-button>

Example 2: Official docs example with all options

<!-- view.html -->
<youtube-subscribe-button
  identifier="my-subscribe-button"
  channel="GoogleDevelopers"
  layout="full"
  theme="dark"
></youtube-subscribe-button>

Example 3: Custom options

// nuxt.config.js
{
  ...,
  modules: [
    ['nuxt-youtube-subscribe-module', {
      tag: 'YoutubeSubscribeButton'
    }]
  ],
  ...,
}

<!-- view.html -->
<YoutubeSubscribeButton
  identifier="my-subscribe-button"
  channel="GoogleDevelopers"
  layout="full"
></YoutubeSubscribeButton>

Component props:

How does this module work❓

Module (when app starts)

1. The module overwrites all default options with the given ones.
2. The module loads the plugin with the YoutubeSubscribeButton global Vue component.
3. The module loads the Google JavaScript API.
4. The youtube-subscribe:gapi-loaded custom event is fired for very quick components.

YoutubeSubscribeButton (when component is used)

1. The component validates all props.
2. All component options are collected.
3. The subscribe button is rendered through render gapi (Google API) method if available.
4. A listener for youtube-subscribe:gapi-loaded custom event is registered for a second retry for display the subscribe button.
5. The subscribe button is rendered after fired from youtube-subscribe:gapi-loaded listener callback.