Картинки, файлы и стили

Картинки и стили в Nuxt лежат в двух местах. Папка public/ отдаётся браузеру как есть, а файлы из app/assets/ обрабатывает сборщик Vite: сжимает, добавляет к имени метку версии и следит, чтобы файл существовал. От выбора папки зависит, как на файл ссылаться.

Папка public

Положите картинку в public/images/cover.jpg. Ссылка на неё начинается от корня сайта, без слова public:

<!-- app/pages/index.vue -->
<template>
  <section>
    <img src="/images/cover.jpg" alt="Обложка блога">
  </section>
</template>

Файл также откроется напрямую по адресу http://localhost:3000/images/cover.jpg. Сюда кладут favicon.ico, robots.txt и файлы, адрес которых должен быть постоянным.

Папка app/assets

Положите логотип в app/assets/images/logo.svg и сошлитесь на него через ~:

<!-- app/layouts/default.vue -->
<template>
  <header>
    <img src="~/assets/images/logo.svg" alt="Мой блог" width="40">
  </header>
</template>

Vite найдёт файл при сборке и подставит адрес вида /_nuxt/logo.Bx3k9.svg. Метка в имени меняется при каждом изменении файла, поэтому браузер не покажет старую версию из кеша. Если в пути опечатка, сборка сообщит об ошибке.

Какую папку выбрать

Общий файл стилей

Создайте app/assets/css/main.css:

/* app/assets/css/main.css */
body {
  margin: 0 auto;
  max-width: 720px;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

И подключите его ко всем страницам в nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})

После перезапуска npm run dev все страницы получат одинаковый шрифт и ширину.

Стили компонента

Стили одного компонента пишут в его блоке <style scoped>:

<!-- app/components/PostCard.vue -->
<style scoped>
.post-card {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
</style>

Слово scoped ограничивает стили этим компонентом: класс .post-card в другом месте сайта не изменится. Для препроцессоров вроде Sass установите пакет (npm install -D sass) и укажите lang="scss" в блоке <style>.

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

Написать src="/public/images/cover.jpg" или src="/assets/images/logo.svg". Слово public в адрес не входит, а файлы из app/assets/ не доступны по прямому адресу. Для public/ пишите путь от корня (/images/cover.jpg), для app/assets/ — через ~/assets/.