Vue.js component for lazyloading YouTube videos.

Overview

vue-lazy-youtube-video

Vue.js logo plus YouTube logo

1.x documentation can be found here.

Features

  • reduces initial load size by ~1.1MB per video
  • built with a11y in mind – fully accessible via keyboard and to screen readers
  • .webp thumbnail format for modern browsers that support it, with .jpg fallback for browsers that don't
  • fully customizable through props and slots

Installation

Via NPM

$ npm install vue-lazy-youtube-video --save

Via Yarn

$ yarn add vue-lazy-youtube-video

Directly in browser

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Styles with CSS Custom Properties -->
<link rel="stylesheet" href="https://unpkg.com/vue-lazy-youtube-video/dist/style.css"></link>
<!-- Minified styles with CSS Custom Properties -->
<!-- <link rel="stylesheet" href="https://unpkg.com/vue-lazy-youtube-video/dist/style.min.css"></link> -->
<!-- Styles without CSS Custom Properties -->
<!-- <link rel="stylesheet" href="https://unpkg.com/vue-lazy-youtube-video/dist/style.simplified.css"></link> -->
<!-- Minified styles without CSS Custom Properties -->
<!-- <link rel="stylesheet" href="https://unpkg.com/vue-lazy-youtube-video/dist/style.simplified.min.css"></link> -->
<script src="https://unpkg.com/vue-lazy-youtube-video"></script>
<script>
  // as a plugin
  Vue.use(VueLazyYoutubeVideo.Plugin)
  // as a component
  Vue.use('LazyYoutubeVideo', VueLazyYoutubeVideo.default)
</script>

Initialization

Styles

import 'vue-lazy-youtube-video/dist/style.css'

As a global component

⚠️ It must be called before new Vue().

import Vue from 'vue'
import LazyYoutubeVideo from 'vue-lazy-youtube-video'

Vue.component('LazyYoutubeVideo', LazyYoutubeVideo)

As a local component

import LazyYoutubeVideo from 'vue-lazy-youtube-video'

export default {
  name: 'YourAwesomeComponent',
  components: {
    LazyYoutubeVideo,
  },
}

As a plugin

⚠️ It must be called before new Vue().

import Vue from 'vue'
import { Plugin } from 'vue-lazy-youtube-video'

Vue.use(Plugin)

Usage

<template>
  <LazyYoutubeVideo src="https://www.youtube.com/embed/4JS70KB9GS0" />
</template>

Demo

Edit vue-lazy-youtube-video

API

Properties

The list of available props (with their types, default values and descriptions) is listed below:

Property Required Type Default Description
src true string <iframe />'s src attribute in https://www.youtube.com/embed/[VIDEO_ID] format. URL can contain any query part, but notice that autoplay=1 is always appended
alt false string Video thumbnail Value of the alt attribute of the thumbnail <img /> element
buttonLabel false string Play video Value of the aria-label attribute of the play <button></button> element. Improves a11y
aspectRatio false string 16:9 Aspect ratio of the video. This prop helps to save proportions of the video on different container sizes. Should match the number:number pattern
previewImageSize false string maxresdefault Size of the thumbnail, generated by YouTube. Available variants: default, mqdefault, sddefault, hqdefault, maxresdefault. More info
thumbnail false { webp: string, jpg: string} Custom thumbnail object, which should contain two keys: webp and jpg. Value of the key is the path to the custom thumbnail image
iframeAttributes false object { allowfullscreen: true, frameborder: 0, allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' } Custom attributes that will be assigned to the <iframe /> element
webp false boolean true Whether or not try to load .webp thumbnail in favor of .jpg. Note that old videos may not have generated .webp thumbnail
autoplay false boolean false Whether or not to play video as soon as component mounts into the DOM
thumbnailListeners false Record<string, Function | Function[]> Listeners that will be attached to the preview thumbnail
enablejsapi false boolean false Include 'enablejapi=1' parameter to the generated src attribute of the <iframe /> element. This will allow you to listen to the init:player event as well as access the YT.Player instance via the getPlayerInstance method. Make sure you have injected the proper YouTube <script /> tag or passed the injectPlayerScript prop
playerOptions false Partial<YT.PlayerOptions> {} Options the will be passed to the YT.Player constructor
injectPlayerScript false boolean false Will auto inject the proper YouTube <script /> when enablejapi is passed and there is no window.YT.Player
parameters false YT.Parameters {} YouTube Parameters that will be injected into the generated <iframe /> src attribute

Events

Name Payload Description
'load:iframe' { iframe?: HTMLIFrameElement } Happens when native' <iframe /> element load event fires
'init:player' { instance: YT.Player } Happens when the YT.Player instance is instantiated

Methods

Name Type Description
getPlayerInstance () => Nullable<YT.Plater> Returns an instance of the YT.Player when the enablejapi prop is passed and the YT.Player is initialized (check 'init:player' event), in other cases returns null

Slots

Component provides some slots.

The list of available slots is listed below:

Slot Description
button Slot gives an ability to provide custom play button
icon Slot gives an ability to provide custom icon of the play button

⚠️ Note, that when button slot is passed and this slot contains <button></button>, ones should not to forget to add aria-label (if this button contains only icon) and type="button" attributes. Also, if that button do not contain .y-video-button class, all default styles will be lost, so style concerns it's up to developer.

FAQ

Question: How to play/pause/stop a video?

Answer: Pass the enablejapi prop and then listen to 'init:player' event to get an instance of the YT.Player. All the available instance methods you can find here. Hint: You can also get a player instance via the getPlayerInstance method.

Code
<LazyYoutubeVideo
  ref="youtube"
  src="..."
  enablejsapi
  @init:player="onPlayerInit"
/>
import { InitPlayerEventPayload } from 'vue-lazy-youtube-video'
{
  // ...
  methods: {
    onPlayerInit(payload: InitPlayerEventPayload) {
      console.log(payload.instance)
      console.log(this.$refs.youtube.getPlayerInstance())
    },
  },
  // ...
}

Tests

You can run unit tests by running the next command:

npm run test

Unit

Jest is used for unit-tests.

Jest and VueTestUtils is used for unit tests.

You can run unit tests by running the next command:

npm run test:unit

TypeScript support

Component is completely built and tested using TypeScript.

Here is the list of the types you can use:

// import type {} TypeScript 3.8 +
import {
  Props,
  LoadIframeEventPayload,
  InitPlayerEventPayload,
  Thumbnail,
} from 'vue-lazy-youtube-video'

Development

  1. Clone this repository
  2. Install dependencies using yarn install or npm install
  3. Start development server using npm run dev script

Build

To build the production ready bundle simply run npm run build:

After the successful build the following files will be generated in the dist folder:

├── vue-lazy-youtube-video.common.js
├── vue-lazy-youtube-video.esm.js
├── vue-lazy-youtube-video.js
├── vue-lazy-youtube-video.min.js
├── style.css
├── style.min.css
├── style.simplified.css
├── style.simplified.min.css

Powered by

Inspiration

Inspired by Vadim Makeev. Vadim created a comprehensive tutorial in which he shows how to lazyload YouTube videos properly.

License

MIT

Comments
  • feat: add property to disable related videos

    feat: add property to disable related videos

    First, congrats by the repo! I tried to disable related videos by adding rel option in playerOptions with playerVars but for some reason, it didn't work, the only way to make it work was to add it as a GET parameter in the src prop. To not set options in several sites I think is better to add it as a prop and I have added the changes to do it

    opened by franciscorode 8
  • Youtube Short URL / List URL support

    Youtube Short URL / List URL support

    Hello. Thank you for creating this component. I added some features. Would you merge this? If you don't like my code styles, please modify anything that you want.

    Added features:

    • Youtube Short URL support / List URL support

    History:

    • URL validation added
    • URL regex added
    • generateURL modified
    • data id added
    • data urlQuery added
    • setUrlInformation created
    enhancement 
    opened by parsher 7
  • Ability to pause video?

    Ability to pause video?

    Hey,

    I have just migrated to this from: https://github.com/kaorun343/vue-youtube-embed/

    Was just wondering if this component had the ability to pause the video? If not, whats your thought's on requesting it as a feature/adding it as a feature :)?

    My use case is, I have a slider with images and a youtube video, when i click to the next video/image or previous video/image - I would like to pause the video that I currently have open so that the video does not continue to play in the background.

    enhancement good first issue question 
    opened by andrewcartwright1 6
  • Access native YTPlayer events.

    Access native YTPlayer events.

    Thanks for a great plugin!

    I was wondering how one could access the native iframe YT.Player events, namely "onStateChange". I am looking to track stats on play time and buffering frequency.

    Even if the plugin returned a reference to the player instance?

    enhancement good first issue question 
    opened by ajarti 6
  • Edge crash

    Edge crash

    When loaded with edge browser, the whole application crashes with the following error: SCRIPT1028: SCRIPT1028: Expected identifier, string or number

    Even the demo code on codesandbox is not loaded on edge.https://codesandbox.io/s/x7nrwxq6qo

    opened by drameryan 6
  • Feature request: events

    Feature request: events

    Hi there

    Would it be possible to add events to the plugin that one can hook into? I'm thinking of two specifically that can be very useful:

    1. @thumbnailLoaded (or something along those lines) which triggers after the thumbnail has fully loaded in the DOM.
    2. @ready which triggers when the iframe has been injected into the DOM and has loaded. This would be useful for mobile when autoplay doesn't work so one can manually trigger the video to play after the "ready" event.
    enhancement 
    opened by caweidmann 6
  • Cannot read property '1' of null

    Cannot read property '1' of null

    Happens when I pass the following YouTube URL: https://www.youtube-nocookie.com/embed/MTk-Hwr15ao.

    Does not happen when using a normal YouTube URL, like: https://www.youtube.com/watch?v=2u_pZ-SgACk.

    Not sure if this qualifies as a bug or a feature.

    good first issue 
    opened by vanhumbeecka 6
  •  ReferenceError document is not defined with Nuxt 2.5.0

    ReferenceError document is not defined with Nuxt 2.5.0

    Hi, I get the following error when using it with Nuxt.js, I also tried by wrapping it within the <no-ssr> but I still got the same error:

    ReferenceError: document is not defined
    node_modules/vue-lazy-youtube-video/dist/vue-lazy-youtube-video.js:1:7909 
    
    good first issue 
    opened by aozora 6
  • NPM: Module parse failed: Unexpected token

    NPM: Module parse failed: Unexpected token

    Hello,

    After clean install, when trying to use npm run watch. Any advice welcomed :) .

    ERROR in ./node_modules/vue-lazy-youtube-video/dist/vue-lazy-youtube-video.esm.js
    Module parse failed: Unexpected token (130:33)
    You may need an appropriate loader to handle this file type.
    |                     ? h('iframe', {
    |                         staticClass: 'y-video__media',
    |                         attrs: { ...iframeAttributes, src: srcAttribute },
    |                     })
    |                     : [
     @ ./src/app.js 43:27-60
    
    opened by songoo 5
  • Removed SASS, not a required dependency

    Removed SASS, not a required dependency

    Removed Sass from the project. There is no benefit to this, it adds overhead.

    With this removal, you can simply import the component directly and use it in SSR with nuxt.

    import LazyYoutubeVideo from 'vue-lazy-youtube-video/src/VueLazyYoutubeVideo.vue';
    export default {
      components: { LazyYoutubeVideo },
    };
    enhancement dependencies 
    opened by unr 5
  • maxresdefault vs hqdefault

    maxresdefault vs hqdefault

    Only 1080 videos have the maxresdefault thumbnail and will not work on most of the YouTube videos. I've taken a look at YouTube HTML and even they use the hqdefault thumbnail.

    Also, if the web explorer can't use the .webp and tries the .jpg it shows an image from the other YouTube video (4JS70KB9GS0).

    bug enhancement 
    opened by yurigo 5
  • build(deps): bump terser from 5.3.1 to 5.14.2

    build(deps): bump terser from 5.3.1 to 5.14.2

    Bumps terser from 5.3.1 to 5.14.2.

    Changelog

    Sourced from terser's changelog.

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)

    v5.14.1

    • keep_numbers option added to TypeScript defs (#1208)
    • Fixed parsing of nested template strings (#1204)

    v5.14.0

    • Switched to @​jridgewell/source-map for sourcemap generation (#1190, #1181)
    • Fixed source maps with non-terminated segments (#1106)
    • Enabled typescript types to be imported from the package (#1194)
    • Extra DOM props have been added (#1191)
    • Delete the AST while generating code, as a means to save RAM

    v5.13.1

    • Removed self-assignments (varname=varname) (closes #1081)
    • Separated inlining code (for inlining things into references, or removing IIFEs)
    • Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

    v5.13.0

    • All calls to eval() were removed (#1171, #1184)
    • source-map was updated to 0.8.0-beta.0 (#1164)
    • NavigatorUAData was added to domprops to avoid property mangling (#1166)

    v5.12.1

    • Fixed an issue with function definitions inside blocks (#1155)
    • Fixed parens of new in some situations (closes #1159)

    v5.12.0

    • TERSER_DEBUG_DIR environment variable
    • @​copyright comments are now preserved with the comments="some" option (#1153)

    v5.11.0

    • Unicode code point escapes (\u{abcde}) are not emitted inside RegExp literals anymore (#1147)
    • acorn is now a regular dependency

    v5.10.0

    • Massive optimization to max_line_len (#1109)
    • Basic support for import assertions
    • Marked ES2022 Object.hasOwn as a pure function
    • Fix delete optional?.property
    • New CI/CD pipeline with github actions (#1057)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • build(deps): bump nanoid from 3.1.15 to 3.3.4

    build(deps): bump nanoid from 3.1.15 to 3.3.4

    Bumps nanoid from 3.1.15 to 3.3.4.

    Changelog

    Sourced from nanoid's changelog.

    3.3.4

    3.3.3

    • Reduced size (by Anton Khlynovskiy).

    3.3.2

    • Fixed enhanced-resolve support.

    3.3.1

    • Reduced package size.

    3.3

    • Added size argument to function from customAlphabet (by Stefan Sundin).

    3.2

    • Added --size and --alphabet arguments to binary (by Vitaly Baev).

    3.1.32

    • Reduced async exports size (by Artyom Arutyunyan).
    • Moved from Jest to uvu (by Vitaly Baev).

    3.1.31

    • Fixed collision vulnerability on object in size (by Artyom Arutyunyan).

    3.1.30

    • Reduced size for project with brotli compression (by Anton Khlynovskiy).

    3.1.29

    • Reduced npm package size.

    3.1.28

    • Reduced npm package size.

    3.1.27

    • Cleaned dependencies from development tools.

    3.1.26

    • Improved performance (by Eitan Har-Shoshanim).
    • Reduced npm package size.

    3.1.25

    • Fixed browserify support.

    3.1.24

    • Fixed browserify support (by Artur Paikin).

    3.1.23

    • Fixed esbuild support.

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • build(deps): bump ansi-regex from 3.0.0 to 3.0.1

    build(deps): bump ansi-regex from 3.0.0 to 3.0.1

    Bumps ansi-regex from 3.0.0 to 3.0.1.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • getPlayerInstance() Does not Return player instance

    getPlayerInstance() Does not Return player instance

    <youtube autoplay class="rounded-borders" previewImageSize="hqdefault" :src="videoSource" ref="youtube" enablejsapi injectPlayerScript @init:player="onPlayerInit" ></youtube>

                `      let self = this;
      // console.info(params.instance.stopVideo());
      // console.info(params.instance.loadVideoById("4NJlUribp3c", 10));
      // console.info(self.$refs.youtube.playerInstance.pauseVideo());
      let ytInstance = self.$refs.youtube.getPlayerInstance();
      console.info(
        ytInstance.loadVideoById("bHQqvYy5KYo", 5, "large")
      );
      console.info(getMethods(ytInstance));
      // console.info(ytInstance.playerInfo());
      ytInstance.loadVideoById("4NJlUribp3c", 10);`
      
    
      I can't seem to get access to the actual YT.Player instance 
    

    image

    opened by GardenRouteGold 0
  • build(deps): bump path-parse from 1.0.6 to 1.0.7

    build(deps): bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v1.2.2)
  • v1.2.2(Mar 24, 2020)

    ✨ Features

    • c9a45e13f374a6bd3bcf6972ad6afa32e18e2eee add size prop, closes #3

    📄 Docs

    • 2f5d168a43ee717ce81a6aae810f5d60a9710655 add notes about size prop
    • c6209c8b25a9303a7321a739dbc478edc2f8332e change prop name from size to previewImageSzie

    💅 Refactors

    • c61695b6061cb712031ee954722b6f339620b4b3 change prop name from size to previewImageSzie

    🐛 Fixes

    • e88f7ca79082a28480f34b1fee09cfe007e38417 fix wrong thumbnail path
    • 9168c80ae05646c5bf515038676a433ba7bc11ce use maxresdefault instead of hqdefault, closes #2
    • 4b441bc57d0a8f64122cd4f32441c65aaafd79a1 add missing colon
    • 201f78937954f18e0c8d3781ac5599f01430566c use object-fit: cover on thumbnail element

    Special thanks to: @yurigo, @ggmanuilov.

    Source code(tar.gz)
    Source code(zip)
Owner
Andrew
I enjoy creating Vue accessible components. Vue render functions lover.
Andrew
Vue 2 image and video loader supporting lazy loading, background videos, fixed aspect ratios, low rez poster images, transitions, loaders, slotted content and more.

Vue Visual Vue 2 image and video loader supporting lazy loading. Visual 2.x is a simplification of Version 1.x with a greater reliance on modern brows

Bukwild 56 Sep 9, 2022
🚀 VueTube Vue component acting as a thin layer over the YouTube IFrame Player API which renders fast

?? A fast, lightweight, lazyload vue component acting as a thin layer over the YouTube Iframe Player API which renders fast

Alexey Istomin 9 Aug 22, 2022
A Vue.js plugin for lazyload your Image or Component in your application.

Vue-Lazyload Vue module for lazyloading images in your applications. Some of goals of this project worth noting include: Be lightweight, powerful and

Awe 7.7k Oct 3, 2022
Component-based lazy (CLazy) load images in Vue.js 2

Vue Clazy Load Claziest lazy loader out there! Component-based image lazy loader for Vue.js 2 Swaps between your image and another component when load

Matheus Grieger 108 Jun 14, 2022
A simple lazy-load list component based Vue 2.x: https://dwqs.github.io/v2-lazy-list/

v2-lazy-list A simple lazy-load list component based Vue 2.x, which will be on-demand rendering the list based container element's viewport. v1.x is n

Pomy 31 Nov 18, 2020
Flexible modal component for Vue with ability of asynchronous lazy loading

vue-async-modal Flexible modal component for Vue with ability of asynchronous lazy loading Usage Firstly, you should add Modal component in your templ

JounQin 36 Sep 25, 2022
Vue.js Image Kit Component with Lazy Load built in and Responsive Images

Vue Image Kit Vue.js Image Kit Component with Lazy Load built in and Responsive Images The inspiration comes from this and a talk from @derevandal in

Igor Guastalla 9 Mar 31, 2022
A Vue.js component to load an image automatically when it enters the viewport.

A Vue.js component to load an image automatically when it enters the viewport.

Ali Sarfaraz 0 Mar 29, 2020
A Vue.js component to lazy load images using the Intersection Observer.

vue-li-image A Vue.js component to lazy load an image automatically when it enters the viewport using the Intersection Observer API.

null 0 Mar 19, 2021
A Vue/Nuxt component that allows you to lazily render components only when they are scrolled into the viewport.

nuxt-render-on-scroll nuxt-render-on-scroll - A Vue/Nuxt component that allows you to lazily render components only when they are scrolled into the vi

Michael Dell 7 Jun 1, 2022
A vue component for sleek and optimal lazy loading

sloth-loader ?? Image Lazy loader Vue Component with intersection observer Example here Installation yarn add sloth-loader npm i sloth-loader import c

Kenny Krosky 0 Oct 21, 2021
Awesome image component for vue2 & vue3 & nuxt. Lazyload / Responsive / Progressive / WebGL Filter / WebGL Transition / WebP

Awesome image component for vue2 & vue3 & nuxt. Lazyload / Responsive / Progressive / WebGL Filter / WebGL Transition / WebP

Phil Xu 54 Oct 2, 2022
Lazy load background images for Vue 2

Lazy Background Images for Vue vue-lazy-background-images A simple Vue component for lazy loading background components. This component is only for ba

Darryn Ten 68 Apr 7, 2022
Vue progressive image loading plugin

vue-progressive-image Vue progressive image loading plugin Installation $ npm install vue-progressive-image Usage import Vue from 'vue' import VueProg

Matteo Gabriele 708 Sep 30, 2022
A lazyload plugin for Vue.js v2.x+.

vue-l-lazyload A lazyload and in-view detection plugin for Vue.js v2.x+. Demo Live demo or npm install vue-l-lazyload && npm run startDev to play it!

Light Leung 26 Mar 9, 2022
A plugin of vue for image lazyload(vue图片懒加载插件)

中文文档看这里 Update v2.1.0 Add requestAnimationFrame polyfill. Now img lazyload detects horizontal direction automatically Imporve perfomence, since the sc

zhaoyenb 251 Aug 29, 2022
simplistic vue.js directive for image lazy loading

Vue Progressive Image Lazy load images while showing a preview. Super tiny, less than half a kilobyte minified and gzipped. usage v-lazy-img adds the

Norman 25 Aug 11, 2021
:camera: Mini Image Lazy Loader for P(R)eact and Vue

Pimg is a Progessive Image Component For React, Preact and Vue.js. It helps in lazy loading of images in a nice and cool way. It's 2KB (gzipped). It h

Ademola. 98 Apr 24, 2021
🐌 A small size Vue.js directive for lazy loading images using IntersectionObserver API

?? vue-tiny-lazyload-img A small size Vue.js directive for lazy loading images using IntersectionObserver API Demo Page https://mazipan.github.io/vue-

Irfan Maulana 91 Nov 18, 2021