Разработка при помощи 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>

The goal of Nuxt is to provide a great developer experience around the Composition API.

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

• Write your own auto-imported reusable functions in the composables/ directory.

Поддержка TypeScript

Both Vue 3 and Nuxt 3+ are written in TypeScript. A fully typed codebase prevents mistakes and documents APIs usage. This doesn’t mean that you have to write your application in TypeScript to take advantage of it. With Nuxt 3, you can opt-in by renaming your file from .js to .ts , or add <script setup lang="ts"> in a component. И Vue 3, и Nuxt 3+ написаны на TypeScript. Полностью типизированная кодовая база предотвращает ошибки и документирует использование API. Это не означает, что вам нужно писать приложение на TypeScript, чтобы воспользоваться его преимуществами. В Nuxt 3 вы можете включить TS, переименовав файл с .js на .ts , или добавить <script setup lang="ts"> в компонент.