vue3-flickity

Vue 3 wrapper for flickity

$3

html

  " alt="">


#### Props
| name | type | description |
| - | - | - |
|options| Object | https://flickity.metafizzy.co/options.html  |
Besides default flickity options, there's an extra attribute removeAriaHidden which removes aria-hidden="true" from slides - default is true
$3

javascript
import { createApp } from 'vue'
import App from './App.vue'
import Flickity from 'vue3-flickity'
// You can use it without styles and write your own styles
import 'vue3-flickity/style';
const app = createApp(App)

app.use(Flickity) app.mount('#app')`

`$3`


Create a plugin

javascript
import Flickity from 'vue3-flickity'
import 'vue3-flickity/style'

export default defineNuxtPlugin(async nuxtApp => { nuxtApp.vueApp.use(Flickity) })``

$3

Same as in flickity (https://flickity.metafizzy.co/events.html)
- ready
- change
- select
- settle
- scroll
- dragStart
- dragMove
- dragEnd
- pointerDown
- pointerMove
- pointerUp
- staticClick
- lazyLoad
- bgLazyLoad
- fullscreenChange

vue3-flickity

Vue 3 wrapper for flickity

$3

html

  " alt="">


#### Props
| name | type | description |
| - | - | - |
|options| Object | https://flickity.metafizzy.co/options.html  |
Besides default flickity options, there's an extra attribute removeAriaHidden which removes aria-hidden="true" from slides - default is true
$3

javascript
import { createApp } from 'vue'
import App from './App.vue'
import Flickity from 'vue3-flickity'
// You can use it without styles and write your own styles
import 'vue3-flickity/style';
const app = createApp(App)

app.use(Flickity) app.mount('#app')`

`$3`


Create a plugin

javascript
import Flickity from 'vue3-flickity'
import 'vue3-flickity/style'

export default defineNuxtPlugin(async nuxtApp => { nuxtApp.vueApp.use(Flickity) })``