Comments (18)
- I make flickity.js in plugins folder.
import Vue from 'vue'
import Flickity from 'vue-flickity'
Vue.component('flickity', Flickity)
- in nuxt.config.js
module.exports = {
plugins: [
{src: '~/plugins/flickity', ssr: false},
]
}
from vue-flickity.
In my case, It wasn't working in chrome but was working in other browsers. I'm not sure why this component isn't converting the flickity dom element to a div (as it does in dev mode), but I was able to get around the issue by adding flickity { display: block; }
to the CSS of my module.
from vue-flickity.
I'm also having troubles with vue-flickity in a nuxt app. I find that it's working when I deploy the app to a heroku container, but when I deploy to a netlify container the carousel arrows/dots are not styled and the slides don't transition (even though the active dot does). i'm running npm run generate
on netlify.
from vue-flickity.
- Import vue-flickity as a plugin.
create a js file under plugin folder:plugins/vue-flickity.js
import Vue from 'vue'
import Flickity from 'vue-flickity'
Vue.component('flickity', Flickity)
- in nuxt.config.js
{
// other configs
plugins: [
{ src: '~/plugins/vue-flickity', ssr: false },
]
// other configs
}
- In component file
<template>
<client-only>
<flickity ref="flickity" :options="flickityOptions">
<div class="carousel-cell">1</div>
<div class="carousel-cell">2</div>
<div class="carousel-cell">3</div>
<div class="carousel-cell">4</div>
<div class="carousel-cell">5</div>
</flickity>
</client-only>
</template>
You can also import Flickity as a component, and register, but don't forget to wrap inside the <client-only>
tag.
import Flickity from 'vue-flickity';
export default {
components: {
Flickity
},
// ...
from vue-flickity.
Can't even get it to run in dev mode :/ @Bombay how do you set ssr false for flickity?
from vue-flickity.
You need to create a plugin and import it in nuxt.config.js with ssr set to false.
Here is the code for the plugin :
import Vue from 'vue'
import Flickity from 'vue-flickity'
Vue.component('flickity', Flickity)
from vue-flickity.
I already set flickity with ssr false.
It's working on dev mode but not on production mode.
from vue-flickity.
Hi there , is this issue has been solved ? Cause I'm using flickity on nuxt project. @Bombay how is goin ?
from vue-flickity.
@toleberdyyeva Sorry for the delay. now I'm using flickity directly in mounted() and watch section.
if (this.flky) this.flky.destroy()
this.flky = null
const carousel = document.querySelector('.score-card-carousel')
const Flickity = require('flickity')
this.flky = new Flickity(carousel, this.flickityOptions)
from vue-flickity.
I'm also getting this issue using Nuxt 2.6.2.
from vue-flickity.
Can't even get it to run in dev mode :/ @Bombay how do you set ssr false for flickity?
Me neither. Is it possible? I'm setting Vue Flickity as a plugin for Nuxt with mode set to client and still not joy!
from vue-flickity.
@michaelpumo Have you put the no-ssr tag before your div who use vue-flickity ?
If yes, you can try to use flickity instead.
Here how you can use it in a component
<script>
let Flickity = {}
if (process.browser) {
Flickity = require("flickity")
}
export default{
created () {
// here i create my options variable
this.flickityOptionsPromos = {
resize: true,
contain: false,
wrapAround: true,
setGallerySize: false,
autoPlay: 4000
}
},
mounted() {
const carousel = this.$refs.flickycarous
if (carousel) {
this.flick = new Flickity(carousel, this.flickityOptionsPromos)
}
}
}
</script>
<template lang="pug">
.carousel
div.flickity-carousel-promo(ref="flickycarous")
.carousel-cell_serv.promo__card(v-for="(produit, index) in produits", :key="index")
.promo__wrapper
img.fallback-image(:src="produit.image")
</template>
from vue-flickity.
@michaelpumo Have you put the no-ssr tag before your div who use vue-flickity ?
If yes, you can try to use flickity instead.
Here how you can use it in a component<script> let Flickity = {} if (process.browser) { Flickity = require("flickity") } export default{ created () { // here i create my options variable this.flickityOptionsPromos = { resize: true, contain: false, wrapAround: true, setGallerySize: false, autoPlay: 4000 } }, mounted() { const carousel = this.$refs.flickycarous if (carousel) { this.flick = new Flickity(carousel, this.flickityOptionsPromos) } } } </script> <template lang="pug"> .carousel div.flickity-carousel-promo(ref="flickycarous") .carousel-cell_serv.promo__card(v-for="(produit, index) in produits", :key="index") .promo__wrapper img.fallback-image(:src="produit.image") </template>
Thanks but I have textual content in my slider that I certainly need for SSR purposes.
from vue-flickity.
@michaelpumo you'll have all the content in ssr with this solution.
Flickity will only execute on client side and put custom style to your div.
If you don't create a style for the server side it'll be ugly but it'll be there.
from vue-flickity.
I'm also having troubles with vue-flickity in a nuxt app. I find that it's working when I deploy the app to a heroku container, but when I deploy to a netlify container the carousel arrows/dots are not styled and the slides don't transition (even though the active dot does). i'm running
npm run generate
on netlify.
Same for me.
from vue-flickity.
I'm using nuxt.
It's working in dev mode but not working in production mode.
(flickity option is ssr false)
just put no-ssr tag around it like that:
```
from vue-flickity.
- Import vue-flickity as a plugin.
create a js file under plugin folder:plugins/vue-flickity.js
import Vue from 'vue' import Flickity from 'vue-flickity' Vue.component('flickity', Flickity)
- in nuxt.config.js
{ // other configs plugins: [ { src: '~/plugins/vue-flickity', ssr: false }, ] // other configs }
- In component file
<template> <client-only> <flickity ref="flickity" :options="flickityOptions"> <div class="carousel-cell">1</div> <div class="carousel-cell">2</div> <div class="carousel-cell">3</div> <div class="carousel-cell">4</div> <div class="carousel-cell">5</div> </flickity> </client-only> </template>
You can also import Flickity as a component, and register, but don't forget to wrap inside the
<client-only>
tag.import Flickity from 'vue-flickity'; export default { components: { Flickity }, // ...
This solution is sub-optimal since it's importing the component globally to your entire Nuxt project.
Having a local import of the package is still a thing to have (would consider it as mandatory even).
Here is my solution for this: https://stackoverflow.com/a/69572014/8816585
from vue-flickity.
I had an issue loading it when using it with Vue.extend
. So I switched from:
export default Vue.extend({
// ...
});
to:
export default {
// ...
};
And it works.. Don't ask
from vue-flickity.
Related Issues (20)
- Any plans to support the flickity-fullscreen option? HOT 6
- Carousel not displaying properly HOT 4
- How to use Flickity Events? HOT 12
- Router links triggers during slides draggin HOT 5
- only show one pre page
- How can i instance multiple vue flickity in the same page? HOT 1
- cannot access flickity via this.$refs HOT 1
- A few methods are missing
- Open a fullscreen container with the image and comments HOT 1
- License: GPLv3 or MIT?
- Sometimes works fine, sometimes does not work properly HOT 1
- Using flickity lazyload: no effect HOT 1
- Provide API for parent component to control the destroying of Flickity HOT 1
- Cells get rendered in reverse HOT 2
- Best way to reinit HOT 1
- Request: support for imagesLoaded option HOT 2
- Fade option not working HOT 4
- Flickity + Typescript Errors: Bad Element for Flickity: .carousel HOT 1
- Images flicker when going to previous route HOT 1
- Carousel Stuck on Last Slide HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-flickity.