Nuxt / SSR compatibility

[furyscript]

Can you please update this for nuxt/ssr? The problem come when launch import VueCropper from 'vue-cropper'

Nuxt nothing can do if you use document/window when import. You can use that after plugin init.

I make a plugin that use vue-cropper and with ssr: false but problem persist.

[xyxiao001]

I need to know how to do it

[xyxiao001]

https://github.com/NightCatSama/vue-slider-component/issues/114

[furyscript]

Thanks, work by importing from src folder. You could update readme if you want, but thanks :D

[xyxiao001]

ok😷

[xyxiao001]

module.exports = {
  ...
  build: {
    vendor: [
      'vue-cropper
    ...
    plugins: [
      { src: '~/plugins/vue-cropper', ssr: false }
    ]
  }
}

[siberiadev]

@xyxiao001 hi Are you sure to put plugins into the build part of nuxt.config.js I think it should placed in the plugins part before build. Like this:

// /nuxt.config.js
module.exports = {
   plugins: [
      { src: '~/plugins/vue-cropper', ssr: false }
    ],
   build: {
      vendor: [
         'vue-cropperjs'
      ]
   }
}

// plugins/vue-cropper.js
import Vue from 'vue';
import VueCropper from 'vue-cropperjs';
Vue.use(VueCropper);

// in page or component
<no-ssr>
   <vue-cropper  
                    :aspectRatio="1"
                    :viewMode="0"
                    :zoomable="true"
                    style="margin-bottom: 20px;"
                    ref="cropper"
                    :src="originalImage"/>
</no-ssr>

BUT! It still has some problems I think. Because nuxt can't find this component, when I open my page with cropper. I get this error in console: Unknown custom element: <vue-cropper> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Any advices?)))

[siberiadev]

HAHA! solved! Just change plugins/vue-cropper.js like this:

import Vue from 'vue';
import VueCropper from 'vue-cropperjs';
Vue.component('vue-cropper', VueCropper);

[nelsonlarocca]

vendor is not longer used !