Usage with Vue - Githubissues

na86 commented 5 years ago

Hello guys, nice job with this lib!

Same as React, is there a way of using this library with Vue? I've tried and failed multiple time 😢.

Would be awesome if someone could supply an example, just like the one with React that works perfectly!

Thank you!

jp-prieto commented 5 years ago

[Client-side Only]

Hi @na86, it does work on Vue.

Here's the basics of how I implemented it. (See /components/hello.vue) https://codesandbox.io/s/vue-template-90nzu

It seems to behave a bit wonky inside codesanbox.io preview browser, but it works fine on real browsers.

Hope that helps.

na86 commented 5 years ago

thanks @jp-prieto i will look into it! thank you

LeoSeyers commented 5 years ago

@jp-prieto nice, thank you i actually tried to integrate it on nuxt project using bits of your code but I got a locomotiveScroll is not a constructor error, i'm not sure how to import it

i tried the following way : let locomotiveScroll; if (process.client) { locomotiveScroll = require('locomotive-scroll'); }

jp-prieto commented 5 years ago

@LeoSeyers I'm not sure you can use CommonJS syntax when importing the module.

The documentation shows just ES6 module import examples. You could try this.

import locomotiveScroll from 'locomotive-scroll'; const lmS;

if (process.client) { lmS = new locomotiveScroll(); }

LeoSeyers commented 5 years ago

@jp-prieto somehow it still got document is undefined, i tried with using nuxt plugins with mode:client to ensure its client side, can't get my head around

jp-prieto commented 5 years ago

[NUXT.js]

@LeoSeyers had to do some trickery to get it to run on Nuxt.js as it expects modules to have SSR support.

Here's a working demo with Nuxt.js https://codesandbox.io/s/nuxtjs-locomotive-scroll-t542g

How it works:

I've created a client-side plugin to import locomotive as a globally available function on Vue's prototype. see: /plugins/locomotiveScroll.js
Added this module to the plugins array at ./nuxt.config.js and specified it's client-side only.
Implemented it at pages/index.vue.

Enjoy.

P-at commented 5 years ago

Hi @jp-prieto, i followed your instructions and run into two issues:

It only works after switching routes.
The calculated height of the #js-scroll container seems to be wrong. (See large whitespace after last image row.)

Here’s the demo: https://codesandbox.io/s/github/P-at/locomotiveScrollTest

Any ideas?

lamalamaMark commented 5 years ago

Be aware that all images should be loaded in order to calculate the full height of the page. We initialise the plugin at page mount and trigger the update() function when all images that are influencing the page height are loaded (via https://github.com/desandro/imagesloaded)


mounted () {
  this.lmS = new this.locomotiveScroll({
    el: document.querySelector('#smooth-scrollbar'),
    smooth: true /* if false disable overflow: hidden on html, body */
  })

  imagesLoaded('#smooth-scrollbar', () => {
    this.lmS.update()
  })
}```

regenrek commented 5 years ago

We're using a locomotive mixin which we include on every page inside a nuxt project (not on components).

This mixin will handle locomotive (lmS) initalizing and destroying.
Additional you can add some custom events like resize or scroll
Get sure you destroy the locomotive instance on every page since you get a lot of scrollbars in your project.
Don't forget to import "locomotive-scroll/dist/locomotive-scroll.min.css";

Here is an example: https://codesandbox.io/embed/nuxt-lazyimage-example-y7clp I've build also some nuxt image module with locomotive scroll support which you can find here https://github.com/regenrek/nuxt-lazyimage

Regards

P-at commented 4 years ago

Don't forget to import "locomotive-scroll/dist/locomotive-scroll.min.css";

Thanks @regenrek, i was not aware of that.

✌️

anku598 commented 4 years ago

I am using typescript on NUXT and i got this error after the locomotive-scroll import. Screenshot_7 Can somebody please give any solution to how it will work or import on typescript? Also how to use the smooth parallax effect on the component as well? Thanks

davidmarkl commented 4 years ago

@anku598 Have you found a solutions for your problem? Because i'm running into the same issue...

anku598 commented 4 years ago

@anku598 Have you found a solutions for your problem? Because i'm running into the same issue...

not yet. they don't have typescript support may be.so i hope team locomotive will figure it out soon so that we can use it in with typescript.

tsangaris commented 3 years ago

@anku598 Have you found a solutions for your problem? Because i'm running into the same issue...

not yet. they don't have typescript support may be.so i hope team locomotive will figure it out soon so that we can use it in with typescript.

Using latest Nuxt (2.14) and get the same error. Is there a way to overcome this? Ex. by using previous version of Locomotive, or its up to Locomotive devs to have it work with Typescript?

CHEWX commented 3 years ago

Doesn't seem a solid way to set this up with Nuxt.

For example the mixin way, what if you have a footer, the scroll always needs to be on the layout rather than the page.

What if you have gsap scrollTrigger animations, you need to talk to locomotive, but in a mixin you cannot do that.

felixdenoix commented 3 years ago

Hi all,

I managed to use the module with nuxt / gridsome ; here is a little repro.

The main idea is to instanciate the Scroll within a renderless component (thanks to the very nice explanations from Jason Yu https://dev.to/ycmjason/vue-without-view-an-introduction-to-renderless-components-23ld) that you previously wrapped in an <client-only> component to prevent any build issue and then communicate with it using a simple EventBus pattern.

Hope it helps,

Also thanks to the authors for the module 🍭

DidoMarchet commented 3 years ago

Hi, if you want I've made this starter kit for using Locomotive Scroll with Nuxt and some examples like basic scroll, horizontal scroll and Scroll Trigger.

https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll

Hope you enjoy,

Davide

Iraklikandelaki commented 3 years ago

Be aware that all images should be loaded in order to calculate the full height of the page. We initialise the plugin at page mount and trigger the update() function when all images that are influencing the page height are loaded (via https://github.com/desandro/imagesloaded)
mounted () {
  this.lmS = new this.locomotiveScroll({
    el: document.querySelector('#smooth-scrollbar'),
    smooth: true /* if false disable overflow: hidden on html, body */
  })

  imagesLoaded('#smooth-scrollbar', () => {
    this.lmS.update()
  })
}```

Have you ever tried using what you've written above? If so, then please share the sandbox template. Because everything is up and running for me, except update(). Literally nothing comes out in the console, no warnings, no errors, just my console log to check whether it works or not. The height is still not calculated by locomotiveScroll and I am unable to scroll to the end of the page.

However, I've found a workaround, you can use v-on:load on your images and emit that event and update locomotiveScroll accordingly. Not sure how good of a workaround it is but better than nothing.

anku598 commented 3 years ago

Hi, if you want I've made this starter kit for using Locomotive Scroll with Nuxt and some examples like basic scroll, horizontal scroll and Scroll Trigger.

https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll

Hope you enjoy,

Davide @DidoMarchet This is what I exactly looking for. Thanks for your work. appreciated. you just saved a lot of developers time especially those who want to create a smooth interactive website but struggle with smooth scrolling with vue and nuxt. I have just one more query. can you please give or found any solution for scrolling inside the page-specific inner div. because right now I have another section that is scrollable with a specific height but when I try to scroll inside that div, whole page is scrolling. how to stop scrolling when i want to scroll a specific area scroll? Thanks

DidoMarchet commented 3 years ago

Hi! Sorry for the delay and thanks :) well I've tried and I cannot solve out the issue. My starterkit was a simple tutorial for a basic and common use. Locomotive scroll alters the normal behaviour of the scroll then this issue is not easy to solve and it's related to the locomotive library :( Maybe working with mouse position (add pointer events none to parent and all to nested scroll) something could be done but I think it's hard. I've tried to find something online but nothing. Have a nice day and regards, Davide

From "Md Raydoan Anik" notifications@github.com To "locomotivemtl/locomotive-scroll" locomotive-scroll@noreply.github.com Cc "Davide Marchet" io@davidemarchet.com,"Mention" mention@noreply.github.com Date Sun, 10 Jan 2021 08:01:20 -0800 Subject Re: [locomotivemtl/locomotive-scroll] Usage with Vue (#15)

 Hi,
 if you want I've made this starter kit for using Locomotive Scroll with Nuxt and some examples like basic scroll, horizontal scroll and Scroll Trigger.

 https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll

 Hope you enjoy,

 Davide
 @DidoMarchet This is what I exactly looking for. Thanks for your work. appreciated. you just saved a lot of developers time especially those who want to create a smooth interactive website but struggle with smooth scrolling with vue and nuxt.
 I have just one more query. can you please give or found any solution for scrolling inside the page-specific inner div. because right now I have another section that is scrollable with a specific height but when I try to scroll inside that div, whole page is scrolling. how to stop scrolling when i want to scroll a specific area scroll?
 Thanks

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

DidoMarchet commented 3 years ago

@DidoMarchet This is what I exactly looking for. Thanks for your work. appreciated. you just saved a lot of developers time especially those who want to create a smooth interactive website but struggle with smooth scrolling with vue and nuxt. I have just one more query. can you please give or found any solution for scrolling inside the page-specific inner div. because right now I have another section that is scrollable with a specific height but when I try to scroll inside that div, whole page is scrolling. how to stop scrolling when i want to scroll a specific area scroll? Thanks

hi, here https://www.mcipollini.com/contacts/ you can find an example (click on the country input) of a nested scroll into a locomotive wrap. You can check if you are into the nested scroll element and use .stop() and .start() methods on locomotive instance. Hope is helpful, Davide

Mitsuriou commented 3 years ago

Hi, if you want I've made this starter kit for using Locomotive Scroll with Nuxt and some examples like basic scroll, horizontal scroll and Scroll Trigger.

https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll

Hope you enjoy,

Davide

Hello, I'm happy that I could integrate that in my Nuxt project, but there is one major issue, and I did not find how to solve it... In your starter kit, for the Vertical Scroll page, the first time the page loads and I scroll down to the bottom, the black squares that have a negative value for the data-scroll-speed attribute will quickly teleport few pixels to the bottom. The issue is even worse for highly negative values: for data-scroll-speed="10", the square is randomly appearing at the top and stays visible until it should be hidden.

Just as a note, I have the same problem on my side, in my project, since I adapted your template (I took the example with the GSAP lib). The issue happend with both vertically and horizontally scrolling components (set with data-scroll-direction). Below is a GIF showing the issue and the code: glitch-teleport

Mitsuriou commented 3 years ago

Hi, if you want I've made this starter kit for using Locomotive Scroll with Nuxt and some examples like basic scroll, horizontal scroll and Scroll Trigger. https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll Hope you enjoy, Davide

Hello, I'm happy that I could integrate that in my Nuxt project, but there is one major issue, and I did not find how to solve it... In your starter kit, for the Vertical Scroll page, the first time the page loads and I scroll down to the bottom, the black squares that have a negative value for the data-scroll-speed attribute will quickly teleport few pixels to the bottom. The issue is even worse for highly negative values: for data-scroll-speed="10", the square is randomly appearing at the top and stays visible until it should be hidden.

Just as a note, I have the same problem on my side, in my project, since I adapted your template (I took the example with the GSAP lib). The issue happend with both vertically and horizontally scrolling components (set with data-scroll-direction). Below is a GIF showing the issue and the code:

For anyone interested, I manage to find a fix/workaround for my issue: I removed padding where there were padding and added the "overflow: hidden;" to the .example.vertical .example-section styles.

anku598 commented 3 years ago

How can i implement it with typescript and nuxt-class-component? it's not working on class component

bennyzen commented 1 year ago

For everyone trying to get this working under Nuxt v3, do this:

create a file for your client-only plugin named plugins/locomotive.client.js and put this into your plugins-file:
```
import 'locomotive-scroll/dist/locomotive-scroll.css'
import LocomotiveScroll from 'locomotive-scroll'
```

export default defineNuxtPlugin(() => { return { provide: { LocomotiveScroll, }, } })

- now make sure you load your plugin in your `nuxt.config.ts` by adding something like:
```javascript
...
plugins: ['~/plugins/locomotive.client.js'],
...

given the client in the plugin name, it should already only execute on the client-side, but make sure you pack everything into your onMounted method/hook, else the DOM won't be available and it will error out. To access the plugin in your SFCs do:
```
onMounted(() => {
const { $LocomotiveScroll } = useNuxtApp()
const scroll = new $LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true,
})
console.log(scroll)
})
```
Hope this helps someone struggling with this.

HarmKraats commented 1 year ago

I've been trying to add Locomotive to my vue website. But can't seem to get it working. When I add it to my main.js I just get errors. And sometimes I get it to not give me errors, but then the whole scrolling is gone. Other times I get no errors, but when I scroll I get an error. I just don't get it.

I am using just Vue, no nuxt or anything.

somespecialone commented 1 year ago

@HarmKraats , hi! You may want to use my lib for this. Docs yet not completed, but it works.

HarmKraats commented 1 year ago

@HarmKraats , hi! You may want to use my lib for this. Docs yet not completed, but it works.

Thanks! I'll look into this!

locomotivemtl / locomotive-scroll

Usage with Vue #15