Плагины

Плагин — файл, который Nuxt выполняет один раз при запуске приложения, до вывода первой страницы. В плагинах подключают библиотеки Vue, регистрируют директивы и добавляют помощников, доступных во всём приложении. Плагины лежат в папке app/plugins/ и регистрируются автоматически.

Первый плагин

npx nuxi add plugin excerpt

Команда создаст app/plugins/excerpt.ts. Замените содержимое:

// app/plugins/excerpt.ts
export default defineNuxtPlugin(() => {
  return {
    provide: {
      excerpt: (text: string, length = 100) =>
        text.length > length ? text.slice(0, length) + '…' : text
    }
  }
})

Всё, что лежит в provide, становится доступно всему приложению с префиксом $. Здесь это функция $excerpt, которая обрезает длинный текст для анонса.

Использование

В шаблоне помощник доступен сразу:

<!-- app/components/PostCard.vue -->
<template>
  <article class="post-card">
    <h3>{{ post.title }}</h3>
    <p>{{ $excerpt(post.text, 60) }}</p>
  </article>
</template>

В карточках на странице /posts будет не больше 60 символов текста и многоточие. В <script setup> помощника получают через useNuxtApp():

<!-- app/components/PostCard.vue -->
<script setup lang="ts">
const { $excerpt } = useNuxtApp()
const preview = $excerpt('Очень длинный текст статьи', 10)
</script>

Директива

Плагин получает объект nuxtApp, а через него — само приложение Vue. Зарегистрируйте директиву, которая ставит курсор в поле:

// app/plugins/focus.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('focus', {
    mounted(el: HTMLElement) {
      el.focus()
    }
  })
})

Теперь в любом шаблоне можно написать <input v-focus> — например, в поле заголовка формы новой статьи. После открытия страницы курсор будет стоять в этом поле. Так же через nuxtApp.vueApp.use(...) подключают библиотеки, написанные для Vue.

Только в браузере или только на сервере

Окончание .client нужно, если плагин обращается к window или подключает библиотеку, которая работает только в браузере.

Порядок

Плагины выполняются в алфавитном порядке имён файлов. Если один плагин зависит от другого, добавьте номера в начало имён: 01.api.ts, 02.excerpt.ts.

Плагин или composable

Если код нужен только некоторым компонентам, сделайте composable: он выполнится только там, где его вызвали. Плагин выполняется при каждом запуске приложения, поэтому каждый лишний плагин замедляет загрузку.

Частая ошибка

Файл app/plugins/helpers/excerpt.ts в подпапке не зарегистрируется, и в шаблоне появится ошибка $excerpt is not a function. Nuxt подключает только файлы верхнего уровня app/plugins/ и файлы index.ts в подпапках. Держите плагины прямо в папке.