How to have multiple instances in Nuxt.js?

[onurgultekin]

trafficstars

I have a component and using two or maybe more scrollings. I looked at Simultaneous Scrolling but never have an idea about how to implement it in Nuxt. Can you please help?

[rigor789]

I don't think there is anything specific to Nuxt, you just need to import the scroller factory, and create multiple instances of it to scroll multiple containers at once.

import {scroller} from 'vue-scrollto/src/scrollTo'

// You can save the scroller instances like we have in the docs
// but you can also just create a new instance, and scroll with it immediately.
scroller()('#el1')
scroller()('#el2')

[onurgultekin]

Thanks for the answer first :)

My configuration is like below:

in nuxt.config.js file:

modules: [
    'vue-scrollto/nuxt'
  ],

In component file:

import { scroller } from 'vue-scrollto/src/scrollTo'
scroller()('#date-items')
scroller()('#time-items')
....
....
if (!this.isDisabled) {
        this.$scrollTo('#date' + this.$route.query.date.split('-').join(''), 600, { container: '#date-items', x: true, offset: -160, force: true })
        if (!this.$route.query.time) {
          this.$store.commit('something', this.times[0])
        } else if (this.times.includes(this.$route.query.time)) {
          this.$scrollTo('#time' + this.$route.query.time.split(':').join(''), 600, { container: '#time-items', x: true, offset: -260, force: true })
          this.$store.commit('something else', this.$route.query.time)
        }
      }
...
...

But I have 'Unexpected identifier' when I import the scroller.

[rigor789]

I'm not familiar with Nuxt, but from what I can tell - you are using this.$scrollTo instead of separate scroller instances.

You could use

this.$scrollTo('#date' + this.$route.query.date.split('-').join(''), 600, { container: '#date-items', x: true, offset: -160, force: true })

as your "1st scroller" (no changes to what you already have), and then for the second one instead of

this.$scrollTo('#time' + this.$route.query.time.split(':').join(''), 600, { container: '#time-items', x: true, offset: -260, force: true })

You would have

scroller()('#time' + this.$route.query.time.split(':').join(''), 600, { container: '#time-items', x: true, offset: -260, force: true })

to create a new scroller instance that can work along with the built-in one.

[onurgultekin]

Thanks for the reply but when I import it like below in my component

import { scroller } from 'vue-scrollto/src/scrollTo'

and use scroller constant in mounted hook in the component, it returns 'Unexpected identifier' in my case.

[rigor789]

Can you share the full error message?

[onurgultekin]

I view this screen when I refresh the page. https://ibb.co/tx9XzLr may SSR be causing it? I imported scrollto module like below but no changes.

modules: [
    {src: 'vue-scrollto/nuxt', ssr: false}
]

[rigor789]

Probably an SSR related issue.

import { scroller } from 'vue-scrollto/src/scrollTo'

Should not run in SSR. I'm not sure what the workaround is in Nuxt - as I don't have experience with it.

[glenndelrosario]

You can try using this method: https://nuxtjs.org/guide/plugins/#vue-plugins

You should create a new file plugins/vue-scrollto.js:

import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo)

Then update your nuxt.config.js

export default {
  plugins: [{ src: '~/plugins/vue-scrollto', ssr: false }]
}

Use it like this:

this.$scrollTo('#el1')
this.$scrollTo('#el2')

or

this.$scrollTo('#date' + this.$route.query.date.split('-').join(''), 600, { container: '#date-items', x: true, offset: -160, force: true })

[bc010101]

Where does this.$scrollTo('#el2') go?