### Install Vue Image Zoomer Component

Source: https://github.com/samjonesigd/vue-image-zoomer/blob/main/README.md

This snippet demonstrates how to install the `vue-image-zoomer` package using npm, which is the standard package manager for Node.js projects.

```sh
npm i vue-image-zoomer
```

--------------------------------

### Configure Responsive Breakpoints with WebP for Vue Image Zoomer

Source: https://github.com/samjonesigd/vue-image-zoomer/blob/main/README.md

This advanced example extends the `breakpoints` configuration to include WebP image support. It shows how to specify `regularWebp` and `zoomWebp` properties within each breakpoint object, ensuring optimal image loading for browsers that support WebP.

```html
<vue-image-zoomer 
	regular="path-to-regular.jpg" 
	regular-webp="path-to-regular.webp" 
	zoom="path-to-zoom.jpg"
	zoom-webp="path-to-zoom.webp" 
	:breakpoints="[
		{
			width: 1200,
			regular: 'path-to-regular-1200.jpg',
			regularWebp: 'path-to-regular-1200.webp',
			zoom: 'path-to-zoom-1200.jpg'
			zoomWebp: 'path-to-zoom-1200.webp'
		},
		{
			width: 992,
			regular: 'path-to-regular-992.jpg',
			regularWebp: 'path-to-regular-992.webp',
			zoom: 'path-to-zoom-992.jpg'
			zoomWebp: 'path-to-zoom-992.webp'
		}						
	]" />
```

--------------------------------

### Basic Vue Image Zoomer Component Usage with HTML

Source: https://github.com/samjonesigd/vue-image-zoomer/blob/main/README.md

These examples demonstrate various ways to use the `vue-image-zoomer` component in HTML. They cover scenarios with and without a dedicated zoom image, and show how to specify image paths for JPG, PNG, and WebP formats using `regular`, `zoom`, `regular-webp`, and `zoom-webp` props.

```html
<!-- Example without zoom image -->
<vue-image-zoomer 
	regular="path-to-regular.jpg" />

<!-- jpg example -->
<vue-image-zoomer 
	regular="path-to-regular.jpg" 
	zoom="path-to-zoom.jpg" />

<!-- png example -->
<vue-image-zoomer 
	regular="path-to-regular.png" 
	zoom="path-to-zoom.png" />

<!-- webp example -->
<vue-image-zoomer 
	regular="path-to-regular.jpg" 
	regular-webp="path-to-regular.webp"
	zoom="path-to-zoom.jpg"
	zoom-webp="path-to-zoom.webp" />
```

--------------------------------

### Implement Placeholder Slot for Vue Image Zoomer

Source: https://github.com/samjonesigd/vue-image-zoomer/blob/main/README.md

This example shows how to use the placeholder slot within the `vue-image-zoomer` component. By placing a low-resolution image inside the slot, it helps improve Cumulative Layout Shift (CLS) and prevents page jumping while the main images load.

```html
<vue-image-zoomer 
	regular="path-to-regular.jpg" 
	zoom="path-to-zoom.jpg">
	<img src="path-to-low-res-placeholder.jpg" />
</vue-image-zoomer>
```

--------------------------------

### Configure Responsive Breakpoints for Vue Image Zoomer

Source: https://github.com/samjonesigd/vue-image-zoomer/blob/main/README.md

This snippet demonstrates how to use the `breakpoints` prop to load different regular and zoom images based on screen width. The array of objects must be ordered from highest to lowest `width` (min-width), with `width` and `regular` parameters being required for each breakpoint.

```html
<vue-image-zoomer 
	regular="path-to-regular.jpg" 
	zoom="path-to-zoom.jpg"
	:breakpoints="[
		{
			width: 1200,
			regular: 'path-to-regular-1200.jpg',
			zoom: 'path-to-zoom-1200.jpg'
		},
		{
			width: 992,
			regular: 'path-to-regular-992.jpg',
			zoom: 'path-to-zoom-992.jpg'
		}						
	]" />
```

--------------------------------

### Vue Image Zoomer Component Props

Source: https://github.com/samjonesigd/vue-image-zoomer/blob/main/README.md

Documentation for the configurable properties (props) of the Vue image zoomer component, detailing their types, default values, and descriptions. These props allow customization of image sources, zoom behavior, messages, and styling.

```APIDOC
Props:
  alt: String
    Description: Alt tag for regular image
  breakpoints: Array
    Description: Array of objects that allows you to have different images on different screen sizes. Example is shown above, width and regular parameters are needed when using this, adition optional parameters are; regularWebp, zoom, zoomWebp
  close-pos: String
    Default: top-left
    Description: Position of the close button on mobile: top-left, top-right, top-center, bottom-left, bottom-right, bottom-center
  click-zoom: Boolean
    Default: false
    Description: Click to zoom instead of hover to zoom which is default
  click-message: String
    Default: <span class="vue-hover-zoom-icon">&#9906;</span> Click to zoom
    Description: To change the message that appears on top of the image before you zoom when click-zoom is set to true, accepts html
  hover-message: String
    Default: <span class="vue-hover-zoom-icon">&#9906;</span> Hover to zoom
    Description: To change the message that appears on top of the image before you hover to zoom, accepts html
  img-class: String
    Description: Class for regular image, e.g. 'img-fluid' in bootstrap
  img-height: Number
    Description: img height attribute for improved lighthouse performance
  img-width: Number
    Description: img width attribute for improved lighthouse performance
  lazyload: Boolean
    Default: false
    Description: To lazyload the regular image, uses HTML loading attribute
  message-pos: String
    Default: bottom
    Description: Position of the message that appears on top of the image before you zoom: top, bottom
  regular: String
    Description: Required. Path to the regular image source
  regular-webp: String
    Description: Path to the regular webp image source, regular option will default as backup if browser doesn't support webp
  right-click: Boolean
    Default: true
    Description: Set to false to disable right click on images (stop easy image stealing)
  show-message: Boolean
    Default: true
    Description: Set to false to hide zoom message on non-touch devices
  show-message-touch: Boolean
    Default: true
    Description: Set to false to hide zoom message on touch devices
  tap-to-close: Boolean
    Default: false
    Description: Set to true to tap to close zoom on mobile, instead of the close button
  touch-message: String
    Default: <span class="vue-hover-zoom-icon">&#9906;</span> Tap to zoom
    Description: To change the message that appears on top of the image before you tap to zoom on a touch screen, accepts html
  touch-zoom-pos: Array
    Default: [0.5, 0.5]
    Description: X & Y position from top left of where the zoom starts on touch devices e.g. [0.5, 0.5] the default, is center, [0, 0] is top left. Max value is 1, min value is 0.
  zoom: String
    Default: Regular image
    Description: Recommended. Path to the zoom image source. If zoom not selected then will use the regular image times by 2.
  zoom-amount: Number
    Description: Amount you want the zoom image to zoom by e.g. '2' would be 2 times as large as the regular image's dom size. Zoom is defaulted to be the size of the zoom image source, if there is not zoom image source then default zoom is 2
  zoom-webp: String
    Description: Path to the zoom webp image source, zoom option will default as backup if browser doesn't support webp. zoom-webp will be regular-webp image if nothing is selected for zoom-webp, but there's a regular-webp image
```

--------------------------------

### Vue Image Zoomer Component Events

Source: https://github.com/samjonesigd/vue-image-zoomer/blob/main/README.md

Documentation for the events emitted by the Vue image zoomer component, detailing when each event fires. These events allow parent components to react to various states of the image loading and zooming process.

```APIDOC
Events:
  regular-loaded
    Description: Fires when the regular image has loaded on page
  off-zoom
    Description: Fires when you are not zooming
  on-zoom
    Description: Fires when you are zooming
  zoom-loaded
    Description: Fires when the zoom image has loaded
  zoom-loading
    Description: Fires when the zoom image is loading
```

--------------------------------

### Basic CSS for Responsive Images

Source: https://github.com/samjonesigd/vue-image-zoomer/blob/main/index.html

This CSS snippet applies fundamental styling to images, ensuring they are responsive within their containers. It sets the maximum width to 100% of the parent element and automatically adjusts the height to maintain the aspect ratio.

```CSS
img{ max-width: 100%; height: auto; }
```

--------------------------------

### Import Vue Image Zoomer into a Vue Component

Source: https://github.com/samjonesigd/vue-image-zoomer/blob/main/README.md

This snippet illustrates how to import and register the Vue Image Zoomer component within a specific Vue component. This approach allows for local registration, making the component available only where it's explicitly imported.

```js
//in component
import { VueImageZoomer } from 'vue-image-zoomer'
import 'vue-image-zoomer/dist/style.css';

export default {
  name: 'App',
  components: {
    VueImageZoomer
  }
}
```

--------------------------------

### Globally Register Vue Image Zoomer in Vue 3

Source: https://github.com/samjonesigd/vue-image-zoomer/blob/main/README.md

This code shows how to globally register the Vue Image Zoomer component in a Vue 3 application. It imports the component and its CSS, then uses `app.use()` to make it available throughout the application.

```js
//global
import { createApp } from 'vue';
import App from './App.vue'
import VueImageZoomer from 'vue-image-zoomer'
import 'vue-image-zoomer/dist/style.css';

const app = createApp(App);

app.use(VueImageZoomer);

app.mount('#app');
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.