Integration of vue-color into NuxtJs

[Geminii]

Hey guys,

Thanks a lot for your greatful work. I have some problem to integrate your module into NuxtJs framework.

In my module, i have these lines :

import { Photoshop } from 'vue-color'
export default Photoshop

Then in my vue, i have this one :

export default {
    components: {
      'photoshop-picker': Photoshop
    }
}

And in my nuxt.config.js, i load the module with ssr false.

plugins: [
    { src:'~/plugins/vue-color', ssr: false }
  ]

But despite all that, i got "document is undefined" What i need to do to fix this ?

Thanks a lot for your answers :)

[jbreneman]

Had the same issue, was able to solve it by simply wrapping the component with the <no-ssr> component that nuxt gives you: https://nuxtjs.org/api/components-no-ssr/.

[linx4200]

We are sorry that vue-color is not compatible with server-side rendering currently, but we already plan to add this feature soon. Please stay tuned. Thanks.

[Geminii]

@jbreneman I try to use tag, but not working. Can you show me how you include it ? I always got : TypeError: Cannot read property 'h' of undefined

[jbreneman]

@Geminii It's a part of nuxt so it should just work. What version are you using? I think I read it wasn't added until one of the RC for nuxt 1.0 so maybe that's the issue? You might give this a shot since the one included with nuxt is a clone of it: https://github.com/egoist/vue-no-ssr

[Geminii]

@linx4200 Thanks a lot for your consideration. How many time to manage this feature request ?

[linx4200]

@Geminii Hard to say. Always welcome PR though. 😃

[nikkwong]

@jbreneman could you quickly show us how you got this working even without SSR in your app? I would like to get it on the client side but I'm also getting TypeError: Cannot read property 'h' of undefined

[nikkwong]

Nevermind. It seemed that the error TypeError: Cannot read property 'h' of undefined will be thrown if a value is not passed to the color picker. Debugged this for a few hrs, might be nice if a better error was thrown :)

[acidjazz]

I had no problem using this in nuxtjs, just need to use the client-only helper

<template lang="pug">
    client-only
      Compact(v-model="colors")
</template>

<script>
import { Compact } from 'vue-color'
export default {
  middleware: ['auth', 'only-admin'],
  components: { Compact },
  data () {
    return {
      colors: [],

    }
  },
}
</script>