How to use v-viewer with Vue 3 Composition API?

Import the API method directly, e.g., `import { api as viewerApi } from 'v-viewer'`, and call it within your setup function, as shown in the README's Composition API examples for dynamic viewer creation.

v-viewer vs viewer.js: which should I choose for Vue?

v-viewer is better if you want Vue-native integration with directives and components, while raw viewer.js is more flexible for non-Vue projects. v-viewer wraps viewer.js, so it adds convenience but depends on it.

Can I customize the toolbar in v-viewer?

Yes, through the options prop or directive configuration, using viewer.js settings. The README includes a custom toolbar CodePen demo showing how to adjust buttons and layout.

Does v-viewer support server-side rendering (SSR)?

It requires client-side JavaScript and Vue, so for SSR, you need to handle hydration carefully. The README doesn't cover SSR explicitly, so testing with frameworks like Nuxt is recommended.

How to dynamically update images in v-viewer?

Use the component's images prop or trigger prop, and for the directive, apply modifiers like 'rebuild' to refresh the viewer when images change, as explained in the README's usage sections.

Is v-viewer good for large image galleries?

It can handle galleries, but performance may degrade with many images due to re-renders. Use the 'static' modifier for fixed galleries to optimize, but monitor bundle size from viewer.js.

Open-Awesome

v-viewer

MITVuev3.0.23

A Vue.js image viewer component with rotation, scaling, zooming, and gallery navigation, built on viewer.js.

Visit Website GitHub

2.6k stars298 forks0 contributors

What is v-viewer?

v-viewer is a Vue.js image viewer component that provides interactive image viewing capabilities like rotation, scaling, zooming, and gallery navigation within Vue applications. It solves the need for a native Vue integration of advanced image viewing features, eliminating the need for external image viewer libraries or custom implementations.

Target Audience

Vue developers building applications that require embedded image viewing functionality, such as media galleries, product showcases, or content management systems.

Value Proposition

Developers choose v-viewer because it offers a Vue-native wrapper around the powerful viewer.js library, providing multiple usage patterns (directive, component, API) and full support for both Vue 2 and Vue 3 with TypeScript compatibility.

Overview

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

Use Cases

Best For

Adding interactive image galleries to Vue.js applications
Creating product image viewers in e-commerce Vue projects
Building media-rich content displays with zoom and rotation
Implementing image comparison features with overlay modes
Developing admin dashboards with previewable image assets
Enhancing portfolio sites with smooth image viewing experiences

Not Ideal For

Projects built with non-Vue frameworks like React or Angular, as v-viewer is Vue-specific and won't integrate directly.
Applications requiring ultra-lightweight image viewers without external dependencies, due to v-viewer's reliance on viewer.js adding to bundle size.
Use cases involving real-time image editing or advanced media types like video, since it's focused solely on static image viewing and manipulation.
Server-side rendered sites with zero client-side JavaScript, as v-viewer requires Vue and viewer.js to run in the browser.

Pros & Cons

Pros

Multiple Integration Methods

Supports directive, component, and API usage, allowing flexible adoption patterns in Vue apps, as shown in the README's extensive examples for different scenarios.

Vue Version Compatibility

Maintains separate branches for Vue 2 and Vue 3, ensuring support across major Vue ecosystems without breaking changes, highlighted in the installation notes.

Rich Configuration Options

Exposes all viewer.js settings for toolbar, zoom, and transitions, giving fine-grained control over the viewing experience, as detailed in the options and methods section.

TypeScript and Modern API Support

Includes examples for both Options and Composition API with TypeScript, catering to contemporary Vue development practices, evident in the code snippets.

Cons

External Library Dependency

Relies on viewer.js, which ties the project to another library's maintenance, updates, and potential bugs, increasing bundle size and complexity.

Performance Overhead with Dynamic Content

The directive and component can cause unnecessary re-renders; the README admits this by offering modifiers like 'static' and 'rebuild' to mitigate, adding setup complexity.

Limited to Image Viewing

Focuses only on images, lacking native support for other media like videos or documents, which might require additional solutions for mixed content.

Frequently Asked Questions

Related Projects

vue-final-modal

🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.

Stars1,013

Forks99

Last commit4 days ago

vue-sweetalert2

A convenient wrapper for sweetalert2.

Stars664

Forks76

Last commit2 years ago

vodal

A Vue modal with animations.

Stars376

Forks57