vue-scrollto

To use vue-scrollto in your Vue application, you must first install it and then register it as a plugin using Vue.use().

const Vue = require('vue')
const VueScrollTo = require('vue-scrollto')
Vue.use(VueScrollTo)

Register the plugin using Vue.use(VueScrollTo). You can then use the v-scroll-to directive on any element. You can pass a selector string or a full options object to customize the behavior of specific scrolls.

// Setup
var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo);

// Usage in template
// Simple selector
<a href="#" v-scroll-to="'#element'">Scroll to #element</a>

// With custom options
<a href="#" v-scroll-to="{
     el: '#element',
     container: '#container',
     duration: 500,
     lazy: false,
     easing: 'linear',
     offset: -200,
     force: true,
     cancelable: true,
     onStart: onStart,
     onDone: onDone,
     onCancel: onCancel,
     x: false,
     y: true
}">
    Scroll to #element
</a>

You can install vue-scrollto using npm, yarn, or by including it directly in your HTML via CDN. Note that the package was renamed from vue-scrollTo to vue-scrollto.

npm install --save vue-scrollto
# or
yarn add vue-scrollto

To use vue-scrollto in a Nuxt.js project, add vue-scrollto/nuxt to the modules section of your nuxt.config.js. You can optionally pass configuration options as a second element in the module array.

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

        // Or if you have custom options...
        ['vue-scrollto/nuxt', { duration: 300 }],
    ]
}