Nuxt 3: un popular marco híbrido Vue

Nuxt 3 ha sido rediseñado y reescrito para soportar ESM y TypeScript de forma nativa. Actualmente es inestable, por lo que aún no está listo para la producción. El lanzamiento del primer candidato ([email protected]) está previsto para el 7 de abril de 2022.

fuente

Iniciar un nuevo proyecto

Abrir un terminal o abrir un terminal integrado desde Visual Studio Código y utiliza el siguiente comando para crear un nuevo starter proyecto:

npx nuxi init nuxt3-app

Abre la carpeta nuxt3-app:

cd nuxt3-app

Instale las dependencias:

instalación de yarn

Ejecute el servidor de desarrollo:

yarn dev

Construye la aplicación:

construcción de hilo

Ejecute la aplicación creada:

Inicio del hilo

¿Qué hay de nuevo?

Vue 3 soporte

Vue 3 incluye varias novedades que agilizan y facilitan la creación y el mantenimiento de aplicaciones. Los cambios más importantes se han realizado en la API Global Vue y en la API de eventos. Vue 3también introduce nuevas funciones como proporcionar / inyectar, la API de composición (que se describe más adelante), Fragmentos, y Teleport.

Composición API

La API de composición es una función integrada en Vue 3 que proporciona un conjunto de APIs que permiten utilizar funciones importadas en lugar de declarar opciones. Así pues, las principales ventajas de la API de composición son una mejor reutilización de la lógica, una organización más flexible del código y una gran integración TypeScript. Todas las partes de la nueva API pueden utilizarse fuera de Vue componentes.

Nuxt 3 proporciona un nuevo directorio - componibles/ - que permite auto-importar Vue composables intro application.

Ejemplo componible:

// Estará disponible como useFoo() (camelCase del nombre del archivo sin extensión)
 export default function () {
   return useState('foo', () => 'bar')// Estará disponible como useFoo() (camelCase del nombre de archivo sin extensión)
 export default function () {
   return useState('foo', () => 'bar')
 }
 }

Ejemplo de utilización de un componible en un Vue componente:

<div>{{ foo }}</div>
</>

Como puedes ver arriba, un composable se exporta como useFoo, tal y como se declara en el nombre const. Si no hay nombre de exportación, el composable será accesible como pascelCase del nombre del archivo. También permite integrar fácilmente los composables auto-importados con un popular composable de Vue Store llamado Pina.

fuente

Motor Nitro

Nitro es un servidor full-stack que utiliza Rollup y Node.js trabajadores en desarrollo para servir código y aislamiento de contexto. También incluye una API de servidor y middleware de servidor. En producción, el motor construye la aplicación y el servidor en un único directorio: `.output`. La cuestión es que output es ligero: minificado y sin ningún tipo de nodo módulos. Nitro le permite desplegar el resultado en Node.js, Serverless, Workers, Edge-side rendering o como puramente estático. 

Nuxt 3 ofrece la posibilidad de desplegar en Azure o Netlify sin necesidad de configuración, junto con un despliegue en Firebase o Cloudflare con una configuración mínima.

Vite

Vite es una herramienta de frontend de nueva generación, integrada en Nuxt 3. Esta herramienta proporciona una experiencia de desarrollo más rápida para los proyectos web. Para el desarrollo, el servidor Vite cuenta con ricas mejoras de características sobre los módulos ES nativos y un Hot Module Replacement (HMR) muy rápido.

En el proceso de construcción, Vite agrupa el código con Rollup preconfigurado para optimizar los activos estáticos para la producción.

Nueva estructura de archivos

fuente

Nuxt 3 introduce una estructura de archivos ligeramente modificada. Los mayores cambios se hicieron a `app.vue` - directorio `pages/` es opcional y si no está presente, la aplicación no incluirá un vue-router, que es útil cuando se crea una página de carga o una aplicación que no necesita enrutamiento. 

Ejemplo de archivo app.vue:

Hola a todos.

Para incluir el enrutamiento, las páginas y el diseño, es necesario utilizar componentes incorporados, a saber, `NuxtPage` y `NuxtLayout`. Ejemplo:

<div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
</div>

`app.vue` es el componente principal de la aplicación Aplicación Nuxtpor lo que todo lo que se añada allí será global y se incluirá en todas las páginas. 

El cambio en el Nuxt implica sustituir el directorio `store/` por `composables/`, ya que Vue 3introduce los componibles, que sustituyen a los almacenes.

Migración de Vue 2 a Vue 3 mediante Nuxt Bridge

Nuxt 3 introduce Nuxt Bridge, una capa de compatibilidad avanzada que actualiza las aplicaciones Nuxt 2 con las funciones de Nuxt 3, permitiendo que se actualice pieza a pieza. Proporciona acceso a características como: Motor Nitro, API de composición y nueva CLI, simplemente instalando y activando el puente.

Nuxt Bridge es compatible con versiones anteriores, por lo que los plugins y módulos heredados seguirán funcionando, mientras que la migración es fácil y posible sin reescribir toda la aplicación.

Para habilitar Nuxt Bridge, tienes que asegurarte de que el servidor de desarrollo no se está ejecutando, luego eliminar cualquier archivo de bloqueo de paquetes e instalar `nuxt-edge`:

- "nuxt": "^2.15.0"

"nuxt-edge" "latest"

A continuación, vuelva a instalar todas las dependencias:

instalar hilo

Su migración con Nuxt Bridge está terminada.

Otra forma es instalar Nuxt Bridge como dependencia de desarrollo:

yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge

Entonces tendrá que actualizar los scripts en `package.json` para tener en cuenta los cambios que el servidor Nitro aporta al proceso de construcción.