Найти тему
34 подписчика

Полезные фичи в Nuxt 3


Иногда требуется создать компоненты, которые будут отображаться только для разработки. Как правило это могут быть логи по клику. Для этого мы делали отдельный компонент и комментировали его или в ручную отслеживали от node.env.

<template>
<div>
<DevButtonLog/>
</div>
</template>

Вместо этого используйте компонент <DevOnly>, который позволяет работать только в dev сборке

<template>
<DevOnly>
<ButtonLog/>
</DevOnly>
</template>

Некоторые компоненты не требуют моментального монтирования. К таким компонентам можно отнести модальные окна. Они как правило запускаются только по событиям. Для такой загрузки, нужно добавлять Lazy в названии компонента.

<Modal v-if="showModal" />
<LazyModal v-if="showModal" />

Для ссылки на сторонние ресурсы, мы можем использовать тег <a>, но в Nuxt это не рекомендуется, так как у нас есть NuxtLink. Если по каким-то причинам Nuxt воспринимает ссылку не так, как нужно, то мы добавляем флаг external

<NuxtLink to="https://google.com" external>Google go</NuxtLink>
Около минуты