есть шаблон
<template>
<div id="app">
<Header/>
<main>
<Nuxt />
</main>
<Footer/>
<CallModal/>
<FormModal/>
<PortfolioModal/>
</div>
</template>
<script>
import Header from "~/components/layout/Header"
import Footer from "~/components/layout/Footer"
import CallModal from '~/components/module/modal/CallModal'
import PortfolioModal from '~/components/module/modal/PortfolioModal'
import FormModal from '~/components/module/modal/FormModal'
export default {
components: {
Header,
Footer,
CallModal,
PortfolioModal,
FormModal
}
}
</script>
<style scoped>
</style>
есть компонент мобильного меню Nav
<template>
<nav>
<a href="#services" @click.prevent="goToBlock" class="_navLink">Услуги</a>
<a href="#portfolio" @click.prevent="goToBlock" class="_navLink">Наши работы</a>
<a href="#reviews" @click.prevent="goToBlock" class="_navLink">Отзывы</a>
<a href="#contacts" @click.prevent="goToBlock" class="_navLink">Контакты</a>
</nav>
</template>
<script>
export default {
name: "Nav",
methods: {
goToBlock: function (event) {
let link = event.target.getAttribute('href')
document.querySelector(link).scrollIntoView({ behavior: 'smooth', block: 'start'})
}
}
}
</script>
<style scoped>
</style>
поставил пакет для определения типа устройства
https://github.com/nuxt-community/device-module
как подгрузить компонент Nav если $device.isTablet || $device.isMobile