В конце февраля 2021 года состоялась онлайн-конференция Vuejs Amsterdam. Он собрал поклонников и членов сообщества Vue.js со всего мира. Было представлено и обсуждено много интересных тем. Конечно, основное внимание было уделено Vue.js 3. Разработчики Nuxt.js также имели возможность продемонстрировать его с точки зрения текущего состояния разработки и своих планов на будущее. Они даже продемонстрировали предварительную альфа-версию Nuxt.js 3 на основе Vue.js 3.

Концепции Nuxt.js

Фреймворк для веб-разработки под названием Nuxt.js основан на фреймворке Vue.js. Это позволяет вам разработать более уверенный в себе, структурированный и оптимизированный для SEO веб-сайт полностью на Vue.js.

Помните, что при создании оптимизированного для SEO веб-сайта требовалось возиться с модулями Vue.js SSR и Vue Meta? Кроме того, вам также нужно было настроить и использовать Vuex и Vue Router!

Однако Nuxt.js справляется с этим! Запустите новое приложение Vue.js без бессистемной настройки и строительных лесов, как в прошлом. Интерфейс командной строки create-nuxt-app упрощает быстрое создание приложения Nuxt.js.

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

Приложения, поддерживаемые Nuxt.js

Nuxt.js поддерживает создание различных веб-приложений, включая следующие:

Рендеринг на стороне сервера (SSR)

Приложения для SSR также называются универсальными приложениями. Перед передачей на клиентскую сторону и отображением в браузере приложение обрабатывается на сервере. При разработке веб-сайта на основе Vue.js, удобного для поисковых систем, это идеальное решение.

Одностраничные приложения (SPA)

Это то, для чего вы использовали Vue.js до этого момента. Файлы JS и CSS, составляющие приложение, собраны. Файлы загружаются на стороне клиента, когда пользователь запрашивает приложение, а после этого механизм Vue.js отображает и отображает приложение.

Создание статических сайтов (SSG)

Ваше приложение может быть предварительно обработано с помощью Nuxt.js во время сборки. Это означает, что все приложение будет преобразовано в простые статические HTML-файлы, которые можно размещать и доставлять через сеть доставки контента (CDN). Приложение JAMStack становится законным, если выбрать параметр SSG.

Маршрутизация файловой системы

Nuxt.js автоматически генерирует все маршруты Vue.js в вашем приложении на основе структуры папок внутри папки pages.

Например, рассмотрим такую ​​структуру папок:

pages/
  --| user/
  -----| index.vue
  --| index.vue

Nuxt.js автоматически генерирует следующую конфигурацию маршрута:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
  ]
}

Получение данных

Вы по-прежнему можете применять стандартные методы, которые вы изучили при создании приложений Vue.js внутри приложений Nuxt.js. Но в этой игре появился новый игрок! рендеринг сделан на сервере. Для предварительной выборки данных при создании приложения на стороне сервера Nuxt.js предлагает новый набор обработчиков данных, которые вы можете реализовать.

Вот два хука данных, предлагаемые Nuxt.js:

Хук fetch() Этот хук появился в версии Nuxt.js 2.12+. Его можно использовать внутри компонентов Vue.js, хранящихся в папках pages и в папке components.

Хук asyncData()Этот хук существует уже некоторое время и может использоваться только внутри компонентов Vue.js, хранящихся на страницах. папка.

Метатеги и SEO

Nuxt.js делает интуитивно понятным добавление поддержки SEO в ваше приложение SSR. Вы можете добавить метаданные в свое приложение на двух разных уровнях:

  • Глобально с помощью файла nuxt.config.js
  • Локально внутри страницы Nuxt.js

В следующей статье я надеюсь обсудить, как создать приложение nuxt.js.

А пока удачного кодирования.👋🏻