Registry / web-framework / vue-picture-swipe

vue-picture-swipe

library2.1.0jsnpmunverified

Vue Picture Swipe Gallery is a Vue 2.x component that provides a mobile-friendly image gallery with swipe functionality, lazy loading, and thumbnail previews. It acts as a lightweight wrapper around the popular PhotoSwipe library, abstracting away its complexities for easier integration into Vue applications. The current stable version, 2.1.0, was released in March 2020 and primarily targets Vue 2 environments. The package differentiates itself by offering out-of-the-box thumbnail support and swipe gestures, addressing a common need for responsive image galleries that some other Vue wrappers or standalone PhotoSwipe integrations might not directly provide without additional configuration. It does not actively receive new feature updates and is not compatible with Vue 3.

web-framework

npm install vue-picture-swipe

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-PICTURE-SWIPE

vue-picture-swipe

web-frameworkjavascriptv2.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VuePictureSwipe

✓ import VuePictureSwipe from 'vue-picture-swipe';

✗ const VuePictureSwipe = require('vue-picture-swipe');

Standard ES module import for use in Vue SFCs or modern JavaScript modules. The CommonJS require() syntax is outdated for this package in most modern Vue CLI setups.

This quickstart demonstrates how to integrate `vue-picture-swipe` into a Vue 2.x Single File Component (SFC), providing a basic image gallery with placeholder images and thumbnails.

<template> <vue-picture-swipe :items="items"></vue-picture-swipe> </template> <script> import VuePictureSwipe from 'vue-picture-swipe'; export default { components: { VuePictureSwipe }, data() { return { items: [ { src: 'http://via.placeholder.com/600x400', thumbnail: 'http://via.placeholder.com/64x64', w: 600, h: 400, alt: 'Some numbers on a grey background' }, { src: 'http://via.placeholder.com/1200x900', thumbnail: 'http://via.placeholder.com/64x64', w: 1200, h: 900, title: 'Another placeholder image' } ] }; } }; </script>

Debug

Known issues

breaking`vue-picture-swipe` is explicitly built for Vue 2.x environments. It is not compatible with Vue 3.x due to breaking changes in the Vue API.

fix

For Vue 3 projects, consider using `vue3-picture-swipe` (a separate package) or another PhotoSwipe wrapper specifically designed for Vue 3, or continue using Vue 2 if migrating is not an option.

affects: >=2.0.0

gotchaThe PhotoSwipe options, accessed via the `options` prop, expect a plain JavaScript object. Incorrect or malformed options may lead to unexpected gallery behavior or errors without explicit warnings.

fix

Refer to the official PhotoSwipe documentation for a comprehensive list of available options and their expected types. Ensure the object passed to the `options` prop conforms to the PhotoSwipe API.

affects: >=2.0.0

gotchaTo programmatically interact with the underlying PhotoSwipe instance, you must assign a `ref` to the `vue-picture-swipe` component and then access its `pswp` property. Accessing the instance before the component is mounted or if the ref is not correctly set will result in `undefined`.

fix

Ensure the component is mounted before attempting to access `$refs.pictureSwipe.pswp`. Wrap calls in `this.$nextTick()` or lifecycle hooks like `mounted()`.

affects: >=2.0.0

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <vue-picture-swipe>

The `vue-picture-swipe` component has not been correctly registered globally or locally within your Vue application.

fix

Globally: `import VuePictureSwipe from 'vue-picture-swipe'; Vue.component('vue-picture-swipe', VuePictureSwipe);`. Locally: import `VuePictureSwipe` into your component's script section and add it to the `components` option: `components: { VuePictureSwipe }`.

TypeError: Cannot read properties of undefined (reading 'pswp')

Attempting to access the PhotoSwipe instance via `this.$refs.pictureSwipe.pswp` before the component has been mounted or the `ref` named `pictureSwipe` is not correctly applied to the `vue-picture-swipe` component.

fix

Ensure the `<vue-picture-swipe ref="pictureSwipe"></vue-picture-swipe>` element has the correct `ref` attribute. Access the `pswp` property only after the component is mounted, typically within `mounted()` or after `this.$nextTick()` for DOM updates.

Upgrade

Version history

2.1.0latest on npm

Audit

Dependencies

photoswiperequiredCore image gallery library that vue-picture-swipe wraps and provides functionality for.

vuerequiredRequires Vue 2.x as a peer dependency to function; not compatible with Vue 3.x.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/rap2hpoutre/vue-picture-swipe ↗

packagehttps://www.npmjs.com/package/vue-picture-swipe ↗