Nuxt•6mo ago

vue-smooth-scroll on nuxt3?

how do i use vue3-smooth-scroll in nuxt3? nuxt.config.ts plugins: ['~/plugins/smooth-scroll.js'], smooth-scroll.js

import { defineNuxtPlugin } from '#app';
import VueSmoothScroll from 'vue3-smooth-scroll';

export default defineNuxtPlugin((nuxtApp) => {
    const app = nuxtApp.vueApp;
    app.use(VueSmoothScroll);
});

import { defineNuxtPlugin } from '#app';
import VueSmoothScroll from 'vue3-smooth-scroll';

export default defineNuxtPlugin((nuxtApp) => {
    const app = nuxtApp.vueApp;
    app.use(VueSmoothScroll);
});

i set it up like this but even so, i still cant use it in my components

6 Replies

Muhammad Mahmoud•6mo ago

I made a stackblitz playground and it works. Check it maybe you missed something? https://stackblitz.com/edit/nuxt-starter-qeq8it?file=app.vue

Muhammad Mahmoud

StackBlitz

Nuxt - Starter (forked) - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

MrFluffycloud•6mo ago

weird, is there any other way to control the speed of the smooth scroll?

Muhammad Mahmoud•6mo ago

I haven't used the plugin before. Chefk the docs I think there would be an option

MrFluffycloud•6mo ago

docs are pretty empty, i tried using the duration property but it doesnt affect teh scroll

Muhammad Mahmoud•6mo ago

Sorry I don't know 😅 maybe someone can help

_rancaHoratiu•6mo ago

Global: const app = createApp(...) app.use(VueSmoothScroll, { duration: 400, updateHistory: false }) Directive: <div id="container"> <a href="#div-id" v-smooth-scroll="{ duration: 1000, offset: -50, container: '#container' }">Anchor</a> <div id="div-id"></div> </div> Programmatic: this.$smoothScroll({ scrollTo: this.$refs.myEl, duration: 1000, offset: -50, }) Programmatic (in Vue3 setup): const smoothScroll = Vue.inject('smoothScroll') smoothScroll({ scrollTo: refs.myEl, duration: 1000, offset: -50, })

Gaming

Programming

vue-smooth-scroll on nuxt3?