Полезные фичи в 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>