Ресурсы (Assets)

В Nuxt для ресурсов предусмотрены два варианта размещения.

Nuxt использует две директории для ресурсов: стилей, шрифтов и изображений.

  • Содержимое public/ отдаётся с корня сервера как есть.
  • В app/assets/ по соглашению лежат ресурсы, которые должен обрабатывать сборщик (Vite или webpack).

Директория Public

Директория public/ используется как публичный каталог статики, доступной по фиксированному URL приложения.

Файлы из public/ доступны в коде приложения и в браузере по корневому URL /.

Пример

Изображение в public/img/ доступно по статическому URL /img/nuxt.png:

app/app.vue
<template>
  <img
    src="/img/nuxt.png"
    alt="Discover Nuxt"
  >
</template>

Директория Assets

Nuxt использует Vite (по умолчанию) или webpack для сборки приложения. Эти инструменты в первую очередь обрабатывают JavaScript, но через плагины (Vite) или лоадеры (webpack) можно обрабатывать и другие ресурсы — стили, шрифты, SVG. На этом этапе файлы преобразуются (минификация, инвалидация кэша и т.п.).

По соглашению для таких файлов используется директория app/assets/; автоматического сканирования этой папки нет, имя можно изменить.

В коде приложения файлы из app/assets/ подключаются через путь ~/assets/.

Пример

Подключение изображения, которое будет обработано сборщиком, если для данного расширения настроена обработка:

app/app.vue
<template>
  <img
    src="~/assets/img/nuxt.png"
    alt="Discover Nuxt"
  >
</template>
Nuxt не раздаёт файлы из app/assets/ по статическому URL вроде /assets/my-file.png. Для статического URL используйте директорию public/.