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

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

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

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

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

Vue вместе Nuxt

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

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

Автоимпорты

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

Vue Router

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

Отличия от 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:

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

Цель Nuxt — предоставить разработчикам отличный опыт работы с Composition API.

• Используйте автоматически импортированные функции реактивности из Vue и встроенные композаблы Nuxt.
• Напишите свои собственные автоматические импортируемые композаблы в директории composables/.

Поддержка TypeScript

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