Nuxt 3 - un cadre hybride Vue populaire

Exécutez l'application créée :

début de fil

Quoi de neuf ?

Vue 3 support

Vue 3 s'est enrichi de plusieurs nouvelles fonctionnalités qui rendent la création et la maintenance d'applications beaucoup plus rapides et faciles. Les changements les plus importants ont été apportés à l'API Global Vue et à l'API Events. Vue 3introduit également de nouvelles fonctionnalités telles que la fourniture / l'injection, l'API de composition (décrite ci-dessous), les fragments et la téléportation.

Composition API

L'API de composition est une fonctionnalité intégrée de Vue 3, qui fournit un ensemble d'API permettant d'utiliser des fonctions importées au lieu de déclarer des options. Les principaux avantages de l'API de composition sont donc une meilleure réutilisation de la logique, une organisation plus souple du code et une excellente intégration de TypeScript. Toutes les parties de la nouvelle API peuvent être utilisées en dehors de Vue des composants.

Nuxt 3 fournit un nouveau répertoire - composables/ - qui permet d'importer automatiquement des composables Vue dans l'application intro.

Exemple composable :

// Il sera disponible comme useFoo() (camelCase du nom de fichier sans extension)
 export default function () {
   return useState('foo', () => 'bar')// Elle sera disponible en tant que useFoo() (camelCase du nom de fichier sans extension)
 export default function () {
   return useState('foo', () => 'bar')
 }
 }

Exemple d'utilisation d'un composable dans un Vue de la composante :

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

Comme vous pouvez le voir ci-dessus, un composable est exporté en tant que useFoo, comme déclaré dans le nom de la const. S'il n'y a pas de nom d'exportation, le composable sera accessible en tant que pascelCase du nom du fichier. Cela vous permet également d'intégrer facilement des composables auto-importés avec un composable populaire du magasin Vue appelé Pina.

source

Moteur Nitro

Nitro est un serveur complet qui utilise Rollup et Node.js en cours de développement afin d'isoler le code et le contexte. Il comprend également une API de serveur et un intergiciel de serveur. En production, le moteur construit l'application et le serveur dans un seul répertoire - `.output`. L'intérêt est que la sortie est légère : minifiée et sans aucune nœud modules. Nitro vous permet de déployer la sortie sur Node.js, Serverless, Workers, Edge-side rendering, ou comme purement statique. 

Nuxt 3 offre la possibilité d'un déploiement sur Azure ou Netlify sans aucune configuration, ainsi qu'un déploiement sur Firebase ou Cloudflare avec une configuration minimale.

Vite

Vite est un outil frontal de nouvelle génération, qui est une fonctionnalité intégrée à Nuxt 3. Cet outil offre une expérience de développement plus rapide pour les projets web. Pour le développement, le serveur Vite dispose de riches fonctionnalités améliorées par rapport aux modules ES natifs et d'un remplacement très rapide des modules à chaud (HMR).

Dans le processus de construction, Vite regroupe le code avec des Rollup préconfigurés afin d'optimiser les actifs statiques pour la production.

Nouvelle structure de fichier

source

Nuxt 3 introduit une structure de fichiers légèrement modifiée. Les changements les plus importants ont été faits dans `app.vue` - le répertoire `pages/` est optionnel et s'il n'est pas présent, l'application n'inclura pas de vue-router, ce qui est utile lors de la création d'une page de chargement ou d'une application qui n'a pas besoin de routage. 

Exemple de fichier app.vue :

Bonjour le monde !

Pour inclure le routage, les pages et la mise en page, vous devez utiliser des composants intégrés, à savoir `NuxtPage` et `NuxtLayout`. Exemple :

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

`app.vue` est le composant principal de l'application Application NuxtAinsi, tout ce qui y est ajouté sera global et inclus dans toutes les pages. 

La modification de la NuxLa structure des répertoires implique le remplacement du répertoire `store/` par le répertoire `composables/`. Vue 3introduit des produits composables qui remplacent les magasins.

Migration de Vue 2 vers Vue 3 à l'aide de Nuxt Bridge

Nuxt 3 introduit Nuxt Bridge - une couche de compatibilité ascendante qui met à jour les applications Nuxt 2 avec les fonctionnalités de Nuxt 3, lui permettant de se mettre à jour petit à petit. Elle permet d'accéder à des fonctionnalités telles que le moteur Nitro, l'API de composition et la nouvelle CLI : le moteur Nitro, l'API de composition et la nouvelle CLI, en installant et en activant simplement le pont.

Nuxt Bridge est rétrocompatible, de sorte que les plugins et modules existants fonctionneront toujours, tandis que la migration est facile et possible sans réécrire l'ensemble de l'application.

Pour activer Nuxt Bridge, vous devez vous assurer que le serveur de développement n'est pas en cours d'exécution, puis supprimer tous les fichiers de verrouillage des paquets et installer `nuxt-edge` :

- "nuxt" : "^2.15.0"

"nuxt-edge" : "dernier"

Ensuite, réinstallez toutes les dépendances :

yarn install

Votre migration à l'aide de Nuxt Bridge est terminée !

Une autre solution consiste à installer Nuxt Bridge comme dépendance de développement :

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

Il faut ensuite mettre à jour les scripts dans `package.json` pour prendre en compte les changements que le serveur Nitro apporte au processus de construction.