How to install flickity carousel with vuejs and nuxtjs

user_286090 0
Viewed 7396

I'm a new vuejs developer. I have study vueje for a while and now I decided to develop a project using vuejs.

So I learn about nuxtjs which is server side rendering. everything goes well. I can use bootstrap4 with my project.

Now I would like to use flickity carousel https://flickity.metafizzy.co on my project and I found that there is a vuejs package on https://github.com/drewjbartlett/vue-flickity

I follow the instruction how to install this component to my project by

npm install vue-flickity --save

and put on some code

<script>
  import Logo from '~/components/Logo.vue'
  import Searchbar from '~/components/Searchbar.vue'
  import axios from 'axios'
  import Flickity from 'vue-flickity';

  export default {
    data () {
      return {
        has_location: false,
        flickityOptions: {
          initialIndex: 3,
          prevNextButtons: false,
          pageDots: false,
          wrapAround: true
        }
      }
    },
    components: {
      Logo,
      Searchbar,
      Flickity
    }
  }
</script>

but it show window is not defined

enter image description here

I have try this with another component like google map, it's show the same error.

Please tell me what wrong did I do and how to install new component to the project.

Thank you.

npm vue.js
3 Answers

Nuxt.js use SSR to render your website server side, therefore window object is not accessible on node.js environment.

What you need to do is use the built-in no-ssr component to prevent Nuxt.js to render it on the server side.

You can simply do this:

<no-ssr>
  <Flickity :options="...">
    <!-- slides -->
  </Flickity>
</no-ssr>

UPDATE: If you still get an error at this point, then load Flickity in a custom Plugin that you will load with ssr disabled

Create a file named plugins/VueFlickity.js

import Vue from 'vue'
import Flickity from 'vue-flickity'

Vue.component('Flickity', Flickity)

Then in your nuxt.config.js your add:

module.exports = {
  // ...
  plugins: [
    { src: '~/plugins/VueFlickity.js', ssr: false }
  ]
}

Don't forget to remove the Flickity local component registration:

components: {
  Logo,
  Searchbar
  // Flickity <-- remove this line
}

This was tested and is now fully working.

user_11334050

I fixed it with:

let Flickity = {};
if (process.browser) {
    Flickity = require('flickity.js');
}
user_46805400

@rayfranco pointed a great way.:) The thing is that by doing this in that way You're importing this plugin globally, but not as local component which is better for performance. So You can do it also like this:

let Flickity;

if (process.client) {
     Flickity = require('vue-flickity')
}

      
export default {
    components: {
       Flickity
    } 
}

and use this component this way:

Important: <no-ssr>......</no-ssr> is deprecated in Nuxt > 2.9, so use

<client-only>
  <Flickity :options="...">
    <div class="carousel-cell">1</div>
    <div class="carousel-cell">2</div>
    <div class="carousel-cell">3</div>
  </Flickity>
</client-only>

you can also look into brief example by Josh Deltener https://deltener.com/blog/common-problems-with-the-nuxt-client-only-component/

user_109008510
Related