https://github.com/dmitriyakkerman/vue-youtube-widget
Vue.js YouTube widget for your website using YouTube API 3
https://github.com/dmitriyakkerman/vue-youtube-widget
vue vue-youtube vuejs widget youtube youtube-api youtube-widget
Last synced: 5 months ago
JSON representation
Vue.js YouTube widget for your website using YouTube API 3
- Host: GitHub
- URL: https://github.com/dmitriyakkerman/vue-youtube-widget
- Owner: dmitriyakkerman
- Created: 2021-07-28T19:56:39.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-30T18:52:28.000Z (about 3 years ago)
- Last Synced: 2025-10-20T02:43:50.904Z (8 months ago)
- Topics: vue, vue-youtube, vuejs, widget, youtube, youtube-api, youtube-widget
- Language: JavaScript
- Homepage:
- Size: 1.63 MB
- Stars: 2
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/dmitriyakkerman/vue-youtube-widget/actions/workflows/test.yml)
# vue-youtube-widget
> Vue.js YouTube widget for your website using YouTube API 3.
* Fetches channel's logo, name and subscribers count
* Fetches initial count of videos
* Loads additional videos
## Installation
### npm
```js
npm i vue-youtube-widget
```
### Github
1. Clone repository
```js
https://github.com/dmitriyakkerman/vue-youtube-widget.git
```
2. Install dependencies
```js
npm install
```
## Usage
1. Import "YouTubeWidget" component in you app
```js
import YouTubeWidget from "./components/YouTubeWidget";
export default {
components: {
YouTubeWidget
}
}
```
2. Configure component additional props if needed:
```js
...
```
3. Import "YouTubeWidget" basic styles from "main.scss"
```css
...
@import "~vue-youtube-widget/dist/YouTubeWidget.min.css";
```
4. Write your additional custom styles for widget.
5. Enjoy! 🎉
-------------
### Props
##### `apiKey`
API key from Google API Console
*Type:* String
*Required:* true
##### `channelId`
ID of Youtube channel
*Type:* String
*Required:* true
##### `resultsPerRequest`
Number of requested videos per request
*Type:* Number
*Required:* false
*Default:* 1
##### `subscribersCountText`
"subscribers" word replacement for localized text using vue-i18n
*Type:* String
*Required:* false
*Default:* "subscribers"
##### `subscribeBtnText`
"Subscribe" word replacement in "Subscribe" button for localized text using vue-i18n
*Type:* String
*Required:* false
*Default:* "Subscribe"
##### `loadMoreBtnText`
"Load more" word replacement in "Load more" button for localized text using vue-i18n
*Type:* String
*Required:* false
*Default:* "Load more"