Разработка при помощи Vue.js

Nuxt использует Vue.js и добавляет такие возможности, как автоматический импорт компонентов, файловую маршрутизацию и композаблы для удобной работы с SSR.

Nuxt интегрирует Vue 3, новую основную версию Vue, которая предоставляет пользователям Nuxt новые паттерны для разработки.

Хотя для использования Nuxt не требуется глубоких знаний Vue, мы рекомендуем вам прочитать документацию и просмотреть некоторые примеры на ru.vuejs.org.

Nuxt всегда использовал Vue в качестве фреймворка.

Мы решили построить Nuxt поверх Vue по следующим причинам:

  • Модель реактивности Vue, где изменение данных автоматически вызывает изменение интерфейса.
  • Шаблоны на основе компонентов, сохраняя HTML в качестве стандартного языка разметки, позволяют использовать интуитивно понятные паттерны, чтобы ваш интерфейс оставался консистентным и при этом мощным.
  • От небольших проектов до крупных веб-приложений, Vue демонстрирует хорошие результаты при масштабировании, что позволяет приложению приносить пользу вашим пользователям.

Vue и Nuxt

Однофайловые компоненты

Однофайловые компоненты Vue (SFC или *.vue файлы) инкапсулируют разметку (<template>), логику (<script>) и стили (<style>) Vue компонента. Nuxt обеспечивает работу SFC без необходимости настройки с помощью HMR — горячей замены модулей для комфортной разработки.

Автоимпорты

Каждый компонент Vue, созданный в директории components/ проекта Nuxt, будет доступен в вашем проекте без необходимости его импорта. Если компонент нигде не используется, он не будет включён в итоговый код продакшена.

Узнать больше Docs > 3 X > Guide > Concepts > Auto Imports.

Vue Router (маршрутизатор)

Большинству приложений требуется несколько страниц и способ навигации между ними. Это называется маршрутизацией. Nuxt использует директорию pages/ и соглашения об именах для непосредственного создания маршрутов, сопоставленных с вашими файлами, с использованием официальной библиотеки Vue Router.

Узнать больше Docs > 3 X > Getting Started > Routing.
Прочитайте и отредактируйте живой пример в Docs > 3 X > Examples > Features > Auto Imports.

Отличия от Nuxt 2 / Vue 2

Nuxt 3+ основан на Vue 3. Новая основная версия Vue содержит несколько изменений, которые использует Nuxt:

  • Улучшенная производительность
  • API композиции (Composition API)
  • Поддержка TypeScript

Более быстрый рендеринг

Виртуальное DOM-дерево (VDOM) Vue было переписано с нуля, и теперь обеспечивает лучшую производительность рендеринга. Кроме того - при работе со скомпилированными SFC - компилятор Vue может дополнительно оптимизировать их во время сборки, разделяя статическую и динамическую разметки.

Это приводит к более быстрым первому рендерингу (созданию компонента) и обновлениям, а также к меньшему использованию памяти. В Nuxt 3 это также обеспечивает более быстрый рендеринг на стороне сервера.

Меньший размер бандла

Во Vue 3 и Nuxt 3 основное внимание было уделено уменьшению размера итогового бандла. Начиная с 3 версии, большая часть функциональности Vue, включая директивы шаблонов и встроенные компоненты, теперь может исключаться при сборке (вырезание неиспользуемого кода, tree-shaking). Ваш итоговый бандл не будет включать их, если вы их не используете.

Таким образом, минимальное приложение Vue 3 может быть уменьшено до 12 КБ в сжатом виде.

Composition API (композиция)

Единственный способ предоставить данные и логику компонентам во Vue 2 — через Options API, который позволяет возвращать данные и методы в шаблон с предопределенными свойствами, такими как data и methods:

<script>
export default {
  data () {
    return {
      count: 0,
    }
  },
  methods: {
    increment () {
      this.count++
    },
  },
}
</script>

Composition API, появившийся в Vue 3, не является заменой Options API, а обеспечивает удобное использование повторяемой логики во всем приложении и является более естественным способом группировки кода по общему признаку в сложных компонентах.

Composition API используется с атрибутом setup в теге <script>. Компонент ниже переписан с использованием Composition API и автоматически импортированного API реактивности из Nuxt 3:

components/Counter.vue
<script setup lang="ts">
const count = ref(0)
const increment = () => count.value++
</script>

Цель Nuxt — обеспечить удобную разработку вокруг Composition API.

  • Пишите собственные переиспользуемые функции с автоимпортом в каталоге composables/.

Поддержка TypeScript

И Vue 3, и Nuxt 3+ написаны на TypeScript. Полностью типизированная кодовая база предотвращает ошибки и документирует использование API. Это не означает, что вам нужно писать приложение на TypeScript, чтобы воспользоваться его преимуществами. В Nuxt 3 вы можете включить TS, переименовав файл с .js на .ts, или добавить <script setup lang="ts"> в компонент.

Узнать больше о TypeScript в Nuxt.