Как реализовать плавную прокрутку до якорных ссылок в Nuxt3?

В Nuxt 3 вы можете использовать пакет `vue-scrollto` для реализации плавной прокрутки до якорных ссылок. Этот пакет позволяет вам прокручивать до элементов страницы по их селектору без добавления ID в URL-адресе браузера.

Вот как можно реализовать плавную прокрутку до якорных ссылок в Nuxt 3:

1. Установите пакет `vue-scrollto` с помощью npm или yarn:

```bash
npm install --save vue-scrollto
```

или

```bash
yarn add vue-scrollto
```

2. Создайте глобальный миксин для использования пакета `vue-scrollto`:

В папке `client` создайте файл `mixin.js` и добавьте следующий код:

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

Vue.use(VueScrollTo)

export default {
  methods: {
    scrollTo(element) {
      this.$scrollTo(element, 500, { offset: -100 }) // настройте необходимую продолжительность прокрутки и смещение
    }
  }
}
```

3. Регистрируйте глобальный миксин:

В папке `client` создайте файл `main.js` и добавьте следующий код:

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import mixin from './mixin'

const app = createApp(App)

app.mixin(mixin)

app.mount('#app')
```

4. Используйте `scrollTo` метод в вашем шаблоне для прокрутки до якорных ссылок:

```html
<template>
  <div>
    <nav>
      <ul>
        <li><a @click="scrollTo('.section1')">Раздел 1</a></li>
        <li><a @click="scrollTo('.section2')">Раздел 2</a></li>
      </ul>
    </nav>

    <section class="section1"><!-- содержимое раздела 1 --></section>
    <section class="section2"><!-- содержимое раздела 2 --></section>
  </div>
</template>
```

Теперь при нажатии на ссылки "Раздел 1" и "Раздел 2" страница будет плавно прокручиваться до соответствующих секций с классами `.section1` и `.section2`.

Точно также, как и в `nuxt.function` мы можем использовать функцию `manualSmoothScroll(event)`, которая будет выполнять гладкую прокрутку к выбранному элементу.

1. Вначале мы находим хэш ссылку, по которой было совершено нажатие. Делаем это с помощью метода `closest()` и проверяем, начинается ли ссылка с символа `#`. Результат сохраняем в переменную `id`. Если ссылка не найдена, или не начинается с символа `#`, мы просто выходим из функции.

2. Затем мы находим целевой элемент, к которому нужно прокрутить страницу, используя метод `querySelector()` и передавая в него значение переменной `id`. Если целевой элемент не найден, мы также выходим из функции.

3. Далее мы отменяем стандартное действие браузера, чтобы избежать перехода по ссылке при нажатии. Для этого использован метод `preventDefault()`.

4. И, наконец, мы прокручиваем страницу к целевому элементу с использованием метода `scrollIntoView()` и передаем в него параметр `{ behavior: "smooth" }`, чтобы выполнить плавную прокрутку.

- При загрузке страницы, мы добавляем слушатель события `'click'` и вызываем функцию `manualSmoothScroll`, передавая ее как колбэк.

- При выгрузке страницы, мы удаляем слушатель события `'click'`, чтобы избежать утечки памяти.

- Если нам нужно ограничить действие только на определенном элементе, мы можем использовать ссылку на этот элемент. Например, `elementRef.value.addEventListener()` или `this.$refs.element.addEventListener()`.