search

XiongAmao / vue-easy-lightbox

A tiny lightbox component for Vue.js 3.0 :tada::tada: https://xiongamao.github.io/vue-easy-lightbox/
MIT License
409 stars 68 forks source link

How to use with Nuxt ? #38

Closed MatteoGauthier closed 4 years ago

XiongAmao commented 4 years ago

Hi, i made a demo. This component uses window API , so it can only be rendered on the client side. This demo may help you use it in Nuxt.

nuxt.config.js / plugins/vue-easy-lightbox / pages/index.vue in https://github.com/XiongAmao/vue-easy-lightbox/tree/master/demos/nuxt-demo

fuongz commented 4 years ago

Hi, i made a demo. This component uses window API , so it can only be rendered on the client side. This demo may help you use it in Nuxt.

nuxt.config.js / plugins/vue-easy-lightbox / pages/index.vue in https://github.com/XiongAmao/vue-easy-lightbox/tree/master/demos/nuxt-demo

It helped me a lot, thank you so much!

suruaku commented 3 years ago

Nuxt example works if I use "vue-easy-lightbox": "^0.11.0", but I get the following warnings(which break the plugin) with the newest version of vue-easy-lightbox. I noticed that for vue 2 and 3 there is different import in ~/plugins but both of them gave me these warnings and project did not load correctly (images unclickable). You can reproduce this by updating nuxt demo's version to "vue-easy-lightbox": "^1.0.0-rc.3"

|  WARN  Compiled with 12 warnings
|  WARN  in ./node_modules/vue-easy-lightbox/dist/vue-easy-lightbox.es5.esm.min.js
| "export 'Transition' (imported as 's') was not found in 'vue'
|
|  WARN  in ./node_modules/vue-easy-lightbox/dist/vue-easy-lightbox.es5.esm.min.js
| "export 'createBlock' (imported as 'n') was not found in 'vue'
|
|  WARN  in ./node_modules/vue-easy-lightbox/dist/vue-easy-lightbox.es5.esm.min.js
| "export 'createCommentVNode' (imported as 'i') was not found in 'vue'
|
|  WARN  in ./node_modules/vue-easy-lightbox/dist/vue-easy-lightbox.es5.esm.min.js
| "export 'createTextVNode' (imported as 'u') was not found in 'vue'
|
|  WARN  in ./node_modules/vue-easy-lightbox/dist/vue-easy-lightbox.es5.esm.min.js
| "export 'createVNode' (imported as 'r') was not found in 'vue'
|
|  WARN  in ./node_modules/vue-easy-lightbox/dist/vue-easy-lightbox.es5.esm.min.js
| "export 'defineComponent' (imported as 't') was not found in 'vue'
|
|  WARN  in ./node_modules/vue-easy-lightbox/dist/vue-easy-lightbox.es5.esm.min.js
| "export 'openBlock' (imported as 'e') was not found in 'vue'
|
|  WARN  in ./node_modules/vue-easy-lightbox/dist/vue-easy-lightbox.es5.esm.min.js
| "export 'renderSlot' (imported as 'a') was not found in 'vue'
|
|  WARN  in ./node_modules/vue-easy-lightbox/dist/vue-easy-lightbox.es5.esm.min.js
| "export 'resolveComponent' (imported as 'o') was not found in 'vue'
|
|  WARN  in ./node_modules/vue-easy-lightbox/dist/vue-easy-lightbox.es5.esm.min.js
| "export 'toDisplayString' (imported as 'f') was not found in 'vue'
|
|  WARN  in ./node_modules/vue-easy-lightbox/dist/vue-easy-lightbox.es5.esm.min.js
| "export 'withCtx' (imported as 'l') was not found in 'vue'
|
|  WARN  in ./node_modules/vue-easy-lightbox/dist/vue-easy-lightbox.es5.esm.min.js
| "export 'withModifiers' (imported as 'c') was not found in 'vue'