{"id":21525802,"url":"https://github.com/bkwld/vue-visual","last_synced_at":"2025-04-05T10:07:55.251Z","repository":{"id":13578376,"uuid":"74797148","full_name":"BKWLD/vue-visual","owner":"BKWLD","description":"Vue 2 image and video loader supporting lazy loading, background videos, fixed aspect ratios, low rez poster images, transitions, loaders, slotted content and more.","archived":false,"fork":false,"pushed_at":"2025-02-18T15:56:23.000Z","size":13730,"stargazers_count":60,"open_issues_count":6,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T09:11:38.702Z","etag":null,"topics":["intersectionobserver","lazy-loading","loader","srcset","video-player","vue"],"latest_commit_sha":null,"homepage":"https://bkwld.github.io/vue-visual","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BKWLD.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-26T01:16:48.000Z","updated_at":"2025-02-18T15:56:19.000Z","dependencies_parsed_at":"2025-02-03T17:52:45.579Z","dependency_job_id":"9a02ed6b-2e2a-441e-81d5-be27f6e9ed7f","html_url":"https://github.com/BKWLD/vue-visual","commit_stats":{"total_commits":320,"total_committers":5,"mean_commits":64.0,"dds":0.44375,"last_synced_commit":"8e78f964ad2a124a8908adf834e41968b4fc5913"},"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fvue-visual","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fvue-visual/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fvue-visual/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fvue-visual/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BKWLD","download_url":"https://codeload.github.com/BKWLD/vue-visual/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247318744,"owners_count":20919484,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["intersectionobserver","lazy-loading","loader","srcset","video-player","vue"],"created_at":"2024-11-24T01:38:31.105Z","updated_at":"2025-04-05T10:07:55.223Z","avatar_url":"https://github.com/BKWLD.png","language":"JavaScript","readme":"# Vue Visual [![npm](https://img.shields.io/npm/v/vue-visual.svg)](https://www.npmjs.com/package/vue-visual)\n\nVue 2 image and video loader supporting lazy loading.  Visual 2.x is a simplification of Version 1.x with a greater reliance on modern browser features (IntersectionObserver, object-fit, srcset, sizes, etc).\n\n\n**Examples at https://bkwld.github.io/vue-visual.**\n\n\n## Installation\n\n1. Install the package: `npm install --save vue-visual` or `yarn add vue-visual`\n2. Register the component:\n\t```js\n\timport Vue from 'vue'\n\timport Visual from 'vue-visual'\n\tVue.component('visual', Visual)\n\timport 'vue-visual/index.css'\n\t```\n3. These polyfills are recommended for older browsers:\n\t- [IntersectionObserver](https://github.com/w3c/IntersectionObserver/tree/master/polyfill)\n\t- [ObjectFit](https://github.com/constancecchen/object-fit-polyfill)\n\n\n## Usage\n\nSee [the Storybook](https://bkwld.github.io/vue-visual).\n\n## Props\n\nA list of the [component properties](http://vuejs.org/v2/guide/components.html#Props) that may be set on the Visual component.\n\n\n#### Assets\n\n- `image (string)` : The URL of an image to load.\n\n- `srcset (string)` : An `img` [srcset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset), used in addition to the `image`.  Both are recommended.\n\n- `webp-srcset (string)` : A `srcset` that will be added to a `source` inside of a `picture` element with a `type` of `image/webp`.\n\n- `video (string|array)` : A video that is loaded after the image is loaded if the device supports video. If a string, should be the URL to a source video.  If an array, a list of video URLs that will be added as difference `\u003csource\u003e`s.\n\n#### Size\n\n- `width (number|string)` : This width will be applied to the asset element. If a number, it's assumed to be a px value.\n\n- `height (number|string)` : See `width`\n\n- `max-width (number|string)` : This value will be applied to the asset element as the css `max-width`. If a number, it's assumed to be a px value.\n\n- `sizes (string)` : Specify the `img` `sizes` attribute.\n\n- `aspect (number)` : Force the Visual to a specific aspect ratio.  This works by making the asset `position:absolute` and then using an inner div with a `padding-top` set to a percentage.\n\n- `expand (boolean)` : Make the Visual fill it's container via CSS using absolute positioning.\n\n\n#### Style\n\n- `object-fit (string)` - *Default `cover`.* Like the CSS property.\n\n- `object-position (string)` - *Default `center center`.*  Like the CSS property.\n\n- `align (string)` - *Default `center middle`.*.  Used in conjunction with slots to position the slot content.  May be any combination of one horizontal (`left`, `center`, `right`) and one vertical (`top`, `middle`, `bottom`) choice, space-delimited.\n\n\n#### Loading\n\n- `preload (boolean)` - Requires Nuxt framework.  If `true` will add `\u003clink rel=\"preload\"/\u003e` tags to the `\u003chead\u003e` for the image assets.\n\n- `autoload (boolean)` - *Default: `true`.*  If `true`, assets are loaded immediately unless `lazyload`.\n\n- `lazyload (boolean)` - Waits until the Visual enters the viewport to trigger loading.  Overrides `autoload`.\n\n- `intersection-options (object)` - IntersectionObserver options. Used with `lazyload` and `autopause`.\n\n- `placeholder-color` - Sets a background color behind the assets.  Most useful in conjunction with an `aspect` value.\n\n- `transition (string, boolean)` -  *Default: `'vv-fade'`.*  A [Vue transition](http://vuejs.org/v2/guide/transitions.html) name that is applied when an asset is loaded. Set to an empty string to immediately render assets rather than waiting for loading.\n\n\n#### Video\n\n- `autoplay (boolean)` - If `true`, begins playing immediately.\n\n- `autopause (boolean)` - If `true`, begins playing when the Visual enters the viewport and stops when it leaves.  Overrides `autoplay`.\n\n- `loop (boolean)` - Sets `\u003cvideo\u003e` `loop`\n\n- `muted (boolean)` - Sets `\u003cvideo\u003e` `muted`\n\n- `controls (boolean)` - Sets `\u003cvideo\u003e` `controls`\n\n\n#### Accessibility\n\n- `alt (string)` - Sets the \u003cimg\u003e `alt` attribute or `aria-label` value, depending on context.\n\n\n## Slots\n\n- `default`: Markup is added after the assets and before the loader\n- `image-source`: Adds `\u003csource\u003e` tags to the `\u003cpicture\u003e` element.\n- `video-source`: Adds `\u003csource\u003e` tags to the `\u003cvideo\u003e` element.\n\n\n## Methods\n\n- `load()` - Manually initiate loading.\n- `play()` - Tell `video` to play.\n- `pause()` - Tell `video` to pause.\n- `restart()` - Tell `video` to restart playback from beginning.\n\n## Events\n\n- `loaded:image` - Image asset has finished loading\n- `loaded:video` - Video asset has finished loading\n- `loaded` - All assets hvae loaded\n\n\n## Contributing\n\n- Boot up the Storybook with `yarn storybook` and use that as your HMR friendly dev environment\n- Use `npm version ...` to build, tag, and update the poblished storybook\n\n## Changes from 1.x\n\n- Dropped props:\n  - `poster`\n  - `fallback`\n  - per-asset variants for `load`, etc\n- Prop changes\n  - `background` ➡ `object-fit`\n  - `background-position` ➡ `object-position`\n  - `fill` ➡ `expand`\n- Not testing for video support on device\n- Video playing state not stored in Vue state\n- Image and video loaded simultenously, not in series\n- Removed `setDefaults` for setting default options.  See [custom-defaults](examples/custom-defaults.js) for an example of how to implement this functionality using a functional component.\n\n[migrate-1.x.coffee](examples/migrate-1.x.coffee) shows an example of a functional component that migrates the old API to the new API.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkwld%2Fvue-visual","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbkwld%2Fvue-visual","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkwld%2Fvue-visual/lists"}