Фреймворк Nuxt

nuxt логотип 2023

Что такое Фреймворк Nuxt

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

Он предоставляет ряд возможностей, облегчающих создание быстрых, SEO-дружественных и масштабируемых веб-приложений, включая:

  • рендеринг на стороне сервера, генерация статических сайтов или гибридный рендеринг,
  • автоматическая маршрутизация с разделением кода,
  • управление состояниями,
  • SEO-оптимизация,
  • расширяемость за счет 100+ модулей,
  • развертывание на различных хостинговых платформах.

Модульность

Nuxt основан на мощной модульной архитектуре. Вы можете выбрать из более чем 50 модулей, чтобы сделать вашу разработку быстрее и проще. Вам не придется изобретать велосипед, чтобы получить преимущества PWA, добавить Google Analytics на свою страницу или сгенерировать карту сайта.

Производительность

С Nuxt.js ваше приложение будет оптимизировано из коробки. Мы делаем все возможное для создания производительных приложений, используя лучшие практики Vue.js и Node.js. Чтобы выжать все лишнее из вашего приложения, Nuxt включает в себя анализатор связок и множество возможностей для тонкой настройки приложения.

Возможности компонентов Vue

Мы любим однофайловые компоненты Vue так же, как и вы. Простой, интуитивно понятный и мощный Nuxt позволяет писать компоненты Vue таким образом, чтобы это имело смысл. Все повторяющиеся задачи автоматизированы, поэтому вы можете сосредоточиться на написании вашего полнофункционального Vue-приложения.

<script setup>
useSeoMeta({
  title: 'Meet Nuxt',
  description: 'The Intuitive Vue Framework.'
})
</script>

<template>
  <div id="app">
    <AppHeader />
    <NuxtPage />
    <AppFooter />
  </div>
</template>

<style>
#app {
  background-color: #020420;
  color: #00DC82;
}
</style>

Статический или динамический рендеринг – выбор за вами

Решите, какая стратегия рендеринга вам нужна на уровне маршрута. Используя гибридный рендеринг, вы можете получить лучшее из двух миров: производительность статического сайта и интерактивность динамического.

export default defineNuxtConfig({
  routeRules: {
    // Homepage pre-rendered at build time
    '/': { prerender: true },
    // Product page generated on-demand, revalidates in background
    '/products/**': { swr: true },
    // Blog post generated on-demand once until next deploy
    '/blog/**': { isr: true },
    // Admin dashboard renders only on client-side
    '/admin/**': { ssr: false },
    // Add cors headers on API routes
    '/api/**': { cors: true },
    // Redirects legacy urls
    '/old-page': { redirect: '/new-page' }
  }
})

Источники