CODEWITHSUNDEEP
vue.jsvuejs2nuxt.jsflickityvue-flickity
Maxime
Maxime

Reputation: 357

Nuxt application throwing error message when using Flickity

I am trying to implement a carousel in a Nuxt application. This is my package.json

 "dependencies": {
    "@nuxtjs/i18n": "^7.0.3",
    "core-js": "^3.15.1",
    "flickity": "^2.2.2",
    "lodash": "^4.17.21",
    "nuxt": "^2.15.7",
    "postcss-nesting": "^8.0.1",
    "throttle-debounce": "^3.0.1",
    "vue-flickity": "^1.2.1"
  },

This is my code

<template>
  <ClientOnly>
    <Flickity
      ref="flickity"
      :key="keyIncrementer"
      class="carousel"
      :class="{ 'carousel--active': active }"
      :options="computedOptions"
    >
      <slot />
    </Flickity>
  </ClientOnly>
</template>

<script>

import Flickity from 'vue-flickity'

const DEFAULT_OPTIONS = {
  cellAlign: 'left',
  pageDots: true,
  prevNextButtons: true
}
export default {
  components: {
    Flickity,
  },
  name: 'BaseCarousel',
  props: {
    active: {
      type: Boolean,
      default: true
    },
    options: {
      type: Object,
      required: false,
      default: () => ({})
    }
  },

If I don't comment out import Flickity from 'vue-flickity' and components: { Flickity, }, I get this error message.

error message

I can't understand what is wrong here. If someone knows please help...

Upvotes: 1

Views: 865

Answers (3)

tony19
tony19

Reputation: 138276

Another workaround is to locally register vue-flickity as an async component only on the client:

export default {
  components: {
    [process.browser && 'Flickity']: () => import('vue-flickity'),
  }
}

demo

Upvotes: 3

Jonathan
Jonathan

Reputation: 11494

Have you added to the plugins/vue-flickity.js something like:

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

Vue.component('Flickity', Flickity)

?

Add also to the nuxt.config.js

plugins: [
  { src: '~/plugins/vue-flickity.js', ssr: false },
]

Upvotes: 2

kissu
kissu

Reputation: 46676

Importing it as a plugin is a solution as shown here: https://github.com/drewjbartlett/vue-flickity/issues/38#issuecomment-906280271

Meanwhile, it is not optimal at all.
Importing it with a dynamic import may be a solution, I'm trying to find a way to write it properly.

Updated answer

This seems to work properly on my side, can you please confirm?

<template>
  <ClientOnly>
    <Flickity
      ref="flickity"
      :key="keyIncrementer"
      class="carousel"
      :class="{ 'carousel--active': active }"
      :options="computedOptions"
    >
      <slot />
    </Flickity>
  </ClientOnly>
</template>

<script>
import Vue from 'vue'

const DEFAULT_OPTIONS = {
  cellAlign: 'left',
  pageDots: true,
  prevNextButtons: true,
}

export default {
  name: 'BaseCarousel',
  props: {
    active: {
      type: Boolean,
      default: true,
    },
    options: {
      type: Object,
      required: false,
      default: () => ({}),
    },
  },
  async mounted() {
    if (process.browser) {
      const Flickity = await import('vue-flickity')
      Vue.component('Flickity', Flickity)
    }
  },
}
</script>

Upvotes: 2

Related Questions