https://github.com/wgr-sa/nuxt-panzoom

Add zooming and panning functionality to your application
https://github.com/wgr-sa/nuxt-panzoom

nuxt nuxt3 panzoom

Last synced: about 1 month ago
JSON representation

Add zooming and panning functionality to your application

• Host: GitHub
• URL: https://github.com/wgr-sa/nuxt-panzoom
• Owner: WGR-SA
• Created: 2023-01-24T15:43:37.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-05T03:00:00.000Z (9 months ago)
• Last Synced: 2024-04-05T03:37:23.591Z (9 months ago)
• Topics: nuxt, nuxt3, panzoom
• Language: Vue
• Homepage:
• Size: 3.37 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Nuxt-panzoom Module

nuxt-panzoom is a simple and easy to use Nuxt 3 module that makes it easy to add zooming and panning functionality to your application. It's built on top of the [panzoom]((https://github.com/timmywil/panzoom)) library and provides a Vue.js directive that can be used to zoom any element in your template.

## Installation

You can install the module by running the following command:

`npm install @wgr-sa/nuxt-panzoom`

## Usage

Add nuxt-panzoom to the modules section of your nuxt.config.js file:

```

export default {

  modules: [

    '@wgr-sa/nuxt-panzoom'

  ],

  panzoom: {

    addControls: true, // Add PanzoomControls component 

  }

}

```

In your template, add the panzoom directive to the element you want to make zoomable.

```

  


    

  


```

The v-panzoom directive accepts an options object. You can find all the options available in the panzoom library documentation https://github.com/timmywil/panzoom

## `PanzoomControls`

`PanzoomControls` is a simple controls component. Put it anywhere and pass the element in props. It will show simple zoomIn, zoomOut and reset buttons

```

  

    

      

    

    

  

```

## Development

- Run `npm run dev:prepare` to generate type stubs.

- Use `npm run dev` to start [playground](./playground) in development mode.