Ассеты

Nuxt предлагает два варианта для ваших ассетов.

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

  • Каталог public/ — файлы, отдаваемые с сервера «как есть», из корня сайта.
  • Директория assets/ содержит по умолчанию все ассеты, которые должен обрабатывать сборщик (Vite или webpack).

Каталог public/

public/ — это статические файлы, доступные по прямым URL вашего приложения.

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

Пример

Например, ссылка на файл изображения из директории public/img/, доступна по статическому URL /img/nuxt.png:

app.vue
<template>
  <img
    src="/img/nuxt.png"
    alt="Откройте для себя Nuxt"
  >
</template>

Каталог assets/

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

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

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

Пример

Например, ссылка на файл изображения, который будет обработан, если инструмент сборки настроен на обработку файла с таким расширением:

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