Publié · en amélioration
Framework · Depuis 2014
Vue.js est un framework JavaScript progressif pour créer des interfaces à base de composants déclaratifs ; Nuxt y ajoute routage, rendu serveur et API.
Vue.js est un framework JavaScript open source pour construire des interfaces utilisateur, créé par Evan You et publié pour la première fois en 2014. Il associe des templates basés sur HTML à un état réactif : la page se met à jour d'elle-même quand les données changent. Son unité de base est le composant monofichier (.vue), qui réunit template, script et styles. Nuxt est un framework full stack bâti sur Vue qui apporte le routage par fichiers, les imports automatiques, le rendu côté serveur et des API serveur reposant sur le moteur Nitro.
Vue s'adopte progressivement : d'une simple balise script qui rend interactive une partie d'une page existante jusqu'à une application monopage complète construite avec Vite. Il convient particulièrement aux écrans très interactifs comme les interfaces d'administration, les tableaux de bord et les outils internes. Lorsque le référencement et la rapidité du premier affichage comptent, ou que l'on veut réunir pages et API dans un même projet, Nuxt fournit rendu serveur, génération statique et routes serveur, et se déploie sur des serveurs Node.js, un hébergement statique et bien d'autres cibles.
Pour débuter, installez Node.js puis suivez le tutoriel interactif et le guide du site officiel afin d'apprendre la réactivité, les composants et la syntaxe des templates. Créez ensuite un projet Vite avec npm create vue@latest et construisez de vrais écrans ; passez à Nuxt lorsque vous avez besoin de conventions de routage et de rendu serveur. Pinia pour la gestion d'état et Vitest pour les tests unitaires sont les compagnons recommandés officiellement.
L'état déclaré avec ref, reactive et computed suit ses dépendances : seules les parties de la page qui utilisent une valeur sont réaffichées quand elle change.
Template, script et styles cohabitent dans un fichier .vue, avec styles à portée limitée et prise en charge de TypeScript dès le départ.
La logique liée est regroupée en fonctions et réutilisée sous forme de composables, ce qui garde même les gros composants organisés par fonctionnalité.
Routage par fichiers, imports automatiques, rendu serveur, génération statique et routes d'API dans le dossier server fonctionnent sans configuration supplémentaire.
Les outils de Vue et de Nuxt fonctionnent sur Node.js. Installez la version LTS depuis nodejs.org et vérifiez que node et npm affichent leur version.
node --version && npm --versionL'outil officiel create-vue demande s'il faut ajouter TypeScript, Vue Router, Pinia, Vitest, etc. Dans le nouveau dossier, lancez npm install puis npm run dev pour démarrer le serveur de développement Vite.
npm create vue@latestPour utiliser Nuxt, générez un projet avec nuxi. Placez-vous dans le nouveau dossier et lancez npm run dev ; le serveur de développement écoute par défaut sur http://localhost:3000.
npx nuxi@latest init my-nuxt-appsrc/App.vue est le composant racine d'un projet create-vue. Le bloc script setup crée un compteur réactif count avec ref(0) ; le template l'affiche entre doubles accolades et l'incrémente à chaque clic grâce à @click. Quand count change, Vue ne réaffiche que ce qui en dépend. Avec npm run dev lancé, chaque modification enregistrée apparaît aussitôt dans le navigateur.
src/App.vue
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script>
<template>
<h1>Hello, Vue!</h1>
<button @click="count++">Clicked {{ count }} times</button>
</template>
npm create vue@latest hello-vue && cd hello-vue && npm install && npm run devSix chapitres pour aller de l'installation aux notions essentielles de Vue.js · Nuxt.
Posez vos questions, partagez votre expérience et échangez vos avis sur Vue.js · Nuxt.
Aucune discussion pour l'instant. Lancez la première.
0 commentaire
Se connecter · Connectez-vous pour laisser un commentaire.
Soyez le premier à commenter.