Конфигурация проекта на Nuxt.js

Оглавление

• Настройки по умолчанию
  • mode
  • target
  • head
  • css
  • plugins
  • components
  • modules
  • build
• Все настройки
  • loading
  • router
  • env
  • generate

Поставляемая по-умолчанию конфигурация Nuxt.js покрывает большую часть потребностей. Однако, файл настроек nuxt.config.js даёт возможность изменять ее, подключая дополнительные модули. На данной странице мы рассмотрим только базовые настройки файла nuxt.config.js.

#

Настройки по умолчанию

Ниже приведен список настроек, которые прописаны в файле nuxt.config.js по умолчанию.

#

mode

Опция mode — указывает на тип вашего приложения.

• Тип: String
• Значение по умолчанию: universal
• Допустимые значения:
  • spa — Без режима SSR, классическое SPA-приложение.
  • universal — Режим SSR.

#

target

Параметры деплоя для Nuxt.js версии >= v2.13

• Тип: String
• Значение по умолчанию: server
• Допустимые значения:
  • server — Для SSR.
  • static — Для статических сайтов.

#

head

Nuxt.js позволяет вам определять мета-теги для вашего приложения внутри файла nuxt.config.js, для этого используется опция head. Вы также можете использовать head как функцию в своих компонентах для доступа к данным компонента через this.

• Тип: Object или Function

Пример опции head:

export default {
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  }
}

Список возможных параметров для размещения в опции head, можно найти в vue-meta documentation.

#

css

Опция в которой вы можете регистрировать глобальные (подключенные к каждой странице) CSS / SCSS файлы приложения.

#

plugins

Опция plugins позволяет писать JavaScript плагины, которые вы можете запустить перед созданием экземпляра корневого приложения vue.js. Один из самых популярных плагинов для vue/nuxt — является axios (позволяет отправлять HTTP запросы как со стороны сервера, так и со стороны клиента). Подробная инструкция по подключению axios описана в официальной документации Nuxt.js.

#

components

• Тип: Boolean или Object
• Значение по умолчанию: false

Если значение true или тип задан как объект, тогда приложение будет включать в себя зависимости nuxt/components и автоматически импортировать ваши компоненты (определенные в ~/components), когда вы используете их в своих шаблонах.

#

modules

• Тип: Array

Модули — это расширения Nuxt.js, которые расширяют его основные функции благодаря огромному количевству пакетов. Для тестирования модулей можно использовать опцию buildModules.

#

build

Опция позволяет кастомизировать встроенные в Nuxt.js webpack.

#

Все настройки

Другие настройки файла nuxt.config.js.

#

loading

• Тип: Boolean или Object или String

Опция позволяет настроить компонент индикатора загрузки, который используется по-умолчанию в Nuxt.js при переходе между маршрутами.

Подробнее см. официальную документацию.

#

router

• Тип: String
• Значение по умолчанию: '/'

Опция позволяет переписать конфигурацию vue-маршрутизатора, поставляемую по-умолчанию в Nuxt.js.

Подробнее см. официальную документацию.

#

env

• Тип: Object

Опция позволяет создавать переменные для клиентской и серверной сторон.

Подробнее см. официальную документацию.

#

generate

• Тип: Object

Опция позволяет определить значения параметров для всех динамических маршрутов в вашем приложении, которые Nuxt.js трансформирует в HTML-файлы. Проще говоря — создает из вашего сайта с SSR, статический сайт.

Подробнее см. официальную документацию.

Полный список возможных базовых конфигураций доступен на сайте официальной документации фреймворка, в разделе Configuration.