Comments (8)
Edited for updated nuxt and vue-image-lightbox
An easy way to use it in Nuxt is like this:
Make a plugin file:
import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'
import LightBox from 'vue-image-lightbox'
require('vue-image-lightbox/dist/vue-image-lightbox.min.css')
Vue.use(VueLazyLoad)
Vue.component('light-box', LightBox)
Add the plugin to nuxt.config with SSR disabled:
plugins: [
{
src: '~/plugins/vue-lightbox-plugin.js',
ssr: false
}
]
Now you can use the 'light-box' component globally. It works only after you have mounted your component:
<template>
<client-only>
<light-box :images="lightBoxImages" />
</client-only>
</template>
from vue-image-lightbox.
@dmiotti @lexcode My approach was to use the System.import function.
When the component is mounted. I import the things I need.
async loadLightBox() {
Promise.all([
System.import('vue-touch'),
System.import('vue-lazyload'),
System.import('vue-image-lightbox')
]).then((modules) => {
const VueTouch = modules.shift(),
VueLazyLoad = modules.shift(),
LightBox = modules.shift();
Vue.use(VueTouch, {name: 'v-touch'});
Vue.use(VueLazyLoad);
Vue.component('lightbox', LightBox);
this.lightboxReady = true;
});
},
},
async mounted() {
this.loadLightBox();
}
`
from vue-image-lightbox.
Hi @Markvandersteen,
I use this package with SSR and it works perfectly! What problem do you face now?
Just import it, use it as normal, you don't need any special code!
from vue-image-lightbox.
At the moment i'm getting some window not defined errors.
from vue-image-lightbox.
I got it working, i did need some extra code to make it work with nuxtjs.
from vue-image-lightbox.
Hi, @Markvandersteen what is the extra code you've added in order to get it work.
from vue-image-lightbox.
Hey @Markvandersteen I am getting the same issue, could you paste your extra code solution in nuxt please?
from vue-image-lightbox.
I found it,
plugins/lightbox.js
if (process.BROWSER_BUILD) {
const VueTouch = require('vue-touch')
Vue.use(VueTouch, { name: 'v-touch' })
}
nuxt.config.js
build: {
vendor: ['vue-touch'],
}
from vue-image-lightbox.
Related Issues (20)
- Multi video playing. HOT 1
- Possible to set target of lightbox to be the parent of an iframe? HOT 3
- Use lightbox with Nuxt.js HOT 2
- Swipe actions don't initialize when media is initially empty HOT 1
- Clicking on the image causes the entire parent element to turn into a black screen. HOT 3
- How to custom current image display in light-box by using slot? HOT 3
- Why remove slot footer when "media.length = 1"? HOT 4
- Base64 image HOT 1
- VueJS3 support
- "Cannot read property 'type' of undefined" error when media array is empty HOT 11
- Missing type definition for TypeScript HOT 2
- onClosed not working
- SVG not load according to insinsic size
- Thumbnail not load
- Thumbnails should scroll horizontally
- Multiple videos are not re-rendering the video component when switching between them HOT 1
- Add pdf support HOT 2
- showImage flashes first image before showing desired image HOT 3
- how to close the light box when click outside of the image?
- Multi Video play problem HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-image-lightbox.