Smooth scroll to anchor links in Nuxt3 как сделать?

Smooth scroll to anchor links в Nuxt.js 3 можно реализовать, используя такие инструменты, как Vue Router и нативные методы JavaScript для плавного прокручивания.

Шаги по реализации следующие:

1. Создайте новый проект Nuxt.js 3 с помощью команды npx create-nuxt-app my-project.

2. Установите необходимые зависимости, включая Vue Router, командой npm install vue-router.

3. Создайте файл router.js в папке src и настройте маршрутизацию для вашего проекта. Пример конфигурации маршрутизации может выглядеть следующим образом:

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/pages/Index.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/pages/About.vue')
  },
  // другие маршруты
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

4. Импортируйте и использовать маршрутизатор в файле main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

5. Теперь вам нужно обновить файл Index.vue (вашу страницу по умолчанию) для создания якорных ссылок. Пример кода может выглядеть следующим образом:

<template>
  <div>
    <h1>Home Page</h1>
    <nav>
      <ul>
        <li><a href="#section1" @click="scrollToAnchor($event)">Section 1</a></li>
        <li><a href="#section2" @click="scrollToAnchor($event)">Section 2</a></li>
        <!-- другие якорные ссылки -->
      </ul>
    </nav>
    <div id="section1">
      <h2>Section 1</h2>
      <!-- содержимое секции 1 -->
    </div>
    <div id="section2">
      <h2>Section 2</h2>
      <!-- содержимое секции 2 -->
    </div>
    <!-- другие секции -->
  </div>
</template>

<script>
export default {
  methods: {
    scrollToAnchor(event) {
      event.preventDefault()
      const targetElement = document.querySelector(event.target.hash)
      targetElement.scrollIntoView({ behavior: 'smooth' })
    }
  }
}
</script>

<style scoped>
/* стили для страницы по умолчанию */
</style>

6. Теперь, если вы кликнете на якорную ссылку, страница будет плавно прокручиваться до соответствующего раздела. Это возможно потому, что мы используем метод scrollIntoView() для прокрутки до элемента с заданным id.

Вот и все! Теперь у вас есть плавная прокрутка для якорных ссылок на вашем сайте, построенном на Nuxt.js 3. Вы можете настроить этот подход и добавить стили, чтобы лучше соответствовать вашему проекту.