Learn Nuxt with a Collection of 100+ Tips!

Разработка при помощи 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, который предлагает плавный DX.

Автоимпорты

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

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

Vue Router

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

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

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

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

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

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

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

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

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

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

Таким образом, минимальное приложение 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.

Поддержка TypeScript

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

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