Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jualoppaz/nuxt-youtube-subscribe-module
Nuxt module for add the official Youtube Subscribe Button in your nuxt application
https://github.com/jualoppaz/nuxt-youtube-subscribe-module
nuxt nuxt-module nuxtjs youtube
Last synced: about 5 hours ago
JSON representation
Nuxt module for add the official Youtube Subscribe Button in your nuxt application
- Host: GitHub
- URL: https://github.com/jualoppaz/nuxt-youtube-subscribe-module
- Owner: jualoppaz
- License: mit
- Created: 2021-01-31T15:38:44.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-01-10T18:46:47.000Z (almost 3 years ago)
- Last Synced: 2024-04-26T01:22:18.019Z (7 months ago)
- Topics: nuxt, nuxt-module, nuxtjs, youtube
- Language: JavaScript
- Homepage:
- Size: 216 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://developers.google.com/youtube/subscribe).
## ✍🏻 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](https://developers.google.com/youtube/subscribe), 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`
```js
// nuxt.config.js
{
...,
modules: [
'nuxt-youtube-subscribe-module'.
],
...,
}
```
If you want to use the module options you have two ways of doing this:
```js
// nuxt.config.js
// Simple usage
{
...,
modules: [
['nuxt-youtube-subscribe-module', {
tag: 'YoutubeSubscribeButton'
}]
],
...,
}
```
```js
// nuxt.config.js
// Using top level options
{
...,
modules: [
'nuxt-youtube-subscribe-module'
],
...,
'youtube-subscribe': {
tag: 'YoutubeSubscribeButton'
},
...,
}
```
**Configuration options**
| Option | type | description
| -------- | ---- | -----------
| `tag` | String | **Optional**. Desired name for the component used to embed the Youtube subscribe button. Defaults to `youtube-subscribe-button`.
## ▶️ Usage
For using this module you only have to add the `` tag in the desired location.
**Example 1**: Same that official docs shows by default
```html
```
**Example 2**: Official docs example with all options
```html
```
**Example 3**: Custom options
```js
// nuxt.config.js
{
...,
modules: [
['nuxt-youtube-subscribe-module', {
tag: 'YoutubeSubscribeButton'
}]
],
...,
}
```
```html
```
**Component props:**
| prop | type | description
| ---- | ---- | -----------
| `identifier` | String | **Required**. Unique string to be used as id in the subscribe button.
| `channelid` | String | **Required conditionally** if no channel is present. Unique string that identifies the **Youtube** channel used to the subscribe button.
| `channel` | String | **Required conditionally** if no channelid is present. Unique string that identifies the **Youtube** channel used to the subscribe button.
| `layout` | String | **Optional**. Desired layout for the subscribe button. Available values are `default` and `full`. Defaults to `default`.
| `theme` | String | **Optional**. Desired theme for the subscribe button. Available values are ` ` (empty string) and `dark`. Defaults to ` `.
| `count` | String | **Optional**. For indicate the visibility of subscribers count. Available values are `default` and `hidden`. Defaults to `default`.
## 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.