{"id":3477,"date":"2022-05-25T06:21:40","date_gmt":"2022-05-25T06:21:40","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/"},"modified":"2026-04-28T14:07:07","modified_gmt":"2026-04-28T14:07:07","slug":"nuxt-3-un-framework-vue-hybride-populaire","status":"publish","type":"post","link":"https:\/\/thecodest.co\/fr\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/","title":{"rendered":"Nuxt 3 - un cadre hybride Vue populaire"},"content":{"rendered":"<p><strong>Nuxt 3<\/strong> a \u00e9t\u00e9 r\u00e9architectur\u00e9e et r\u00e9\u00e9crite pour prendre en charge la GSE et la <a href=\"https:\/\/thecodest.co\/fr\/dictionary\/typescript-developer\/\">TypeScript<\/a> en mode natif. Il est actuellement instable, ce qui fait qu'il n'est pas encore pr\u00eat pour la production. La premi\u00e8re version candidate (nuxt@3.0.0-rc.1) devrait \u00eatre publi\u00e9e le 7 avril 2022.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/zrzut-ekranu-2022-05-25-o-08.26.43.png\" alt=\"Tableau Nuxt \" title=\"Tableau comparatif Nuxt \"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.google.com\/url?q=https:\/\/v3.nuxtjs.org\/getting-started\/introduction\/%23comparison&amp;sa=D&amp;source=docs&amp;ust=1653463586111556&amp;usg=AOvVaw0WL5Cg-cEL0X_q8Kiu_fGy\" rel=\"nofollow\">source<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">D\u00e9marrer un nouveau projet<\/h2>\n\n\n\n<p>Ouvrir un terminal ou ouvrir un terminal int\u00e9gr\u00e9 \u00e0 partir de Visual Studio <a href=\"https:\/\/thecodest.co\/fr\/dictionary\/what-is-code-refactoring\/\">Code<\/a> et utilisez la commande suivante pour cr\u00e9er un nouveau starter <a href=\"https:\/\/thecodest.co\/fr\/dictionary\/why-do-projects-fail\/\">projet<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>npx nuxi init nuxt3-app<\/code><\/code><\/pre>\n\n\n\n<p>Ouvrez le dossier nuxt3-app :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code>cd nuxt3-app<\/code><\/code><\/code><\/pre>\n\n\n\n<p>Installer les d\u00e9pendances :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code><code>yarn install<\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<p>Ex\u00e9cutez le serveur de d\u00e9veloppement :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code><code><code>yarn dev<\/code><\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<p>Cr\u00e9er l'application :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code><code><code><code><code>compilation de Yarn<\/code><\/code><\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<p>Ex\u00e9cutez l'application cr\u00e9\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code><code><code><code><code><code>d\u00e9but de fil<\/code><\/code><\/code><\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Quoi de neuf ?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Vue 3 support<\/h3>\n\n\n\n<p><strong><a href=\"https:\/\/thecodest.co\/fr\/blog\/hire-vue-js-developers\/\">Vue<\/a> 3<\/strong> a \u00e9t\u00e9 dot\u00e9 de plusieurs nouvelles fonctionnalit\u00e9s qui rendent la cr\u00e9ation et la maintenance d'applications beaucoup plus rapides et faciles. Les changements les plus importants concernent Global Vue <a href=\"https:\/\/thecodest.co\/fr\/blog\/compare-staff-augmentation-firms-that-excel-in-api-team-staffing-for-financial-technology-projects\/\">API<\/a> et l'API sur les \u00e9v\u00e9nements. <strong>Vue 3<\/strong>introduit \u00e9galement de nouvelles fonctionnalit\u00e9s telles que la fourniture \/ l'injection, l'API de composition (d\u00e9crite ci-dessous), les fragments et la t\u00e9l\u00e9portation.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/thecodest.co\/services\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/blog.webp\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Composition API<\/h3>\n\n\n\n<p>L'API de composition est une fonctionnalit\u00e9 int\u00e9gr\u00e9e de Vue 3, qui fournit un ensemble d'API permettant d'utiliser des fonctions import\u00e9es au lieu de d\u00e9clarer des options. Les principaux avantages de l'API de composition sont donc une meilleure r\u00e9utilisation de la logique, une organisation plus souple du code et une excellente int\u00e9gration de TypeScript. Toutes les parties de la nouvelle API peuvent \u00eatre utilis\u00e9es en dehors de <strong>Vue<\/strong> des composants.<\/p>\n\n\n\n<p><strong>Nuxt 3<\/strong> fournit un nouveau r\u00e9pertoire - <code>composables\/<\/code> - qui permet d'importer automatiquement des composables Vue dans l'application intro.<\/p>\n\n\n\n<p>Exemple composable :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code><code><code><code><code>\/\/ Il sera disponible comme useFoo() (camelCase du nom de fichier sans extension)\n export default function () {\n   return useState('foo', () =&gt; 'bar')<code>\/\/ Elle sera disponible en tant que useFoo() (camelCase du nom de fichier sans extension)\n export default function () {\n   return useState('foo', () =&gt; 'bar')\n }<\/code>\n }<\/code><\/code><\/code><\/code><\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<p>Exemple d'utilisation d'un composable dans un <strong>Vue<\/strong> de la composante :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;div&gt;{{ foo }}&lt;\/div&gt;\n&lt;\/&gt;<\/code><\/pre>\n\n\n\n<p>Comme vous pouvez le voir ci-dessus, un composable est export\u00e9 en tant que useFoo, comme d\u00e9clar\u00e9 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 \u00e9galement d'int\u00e9grer facilement des composables auto-import\u00e9s avec un composable populaire du magasin Vue appel\u00e9 <a href=\"https:\/\/www.google.com\/url?q=https:\/\/pinia.vuejs.org\/&amp;sa=D&amp;source=docs&amp;ust=1653463671582173&amp;usg=AOvVaw1YVpJI3sNMeufnYVxcM43i\" rel=\"nofollow\">Pina<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/api.png\" alt=\"Exemple de structure de l&#039;API \" title=\"Options et API de composition \"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/vuejs.org\/guide\/extras\/composition-api-faq.html#better-logic-reuse\" rel=\"nofollow\">source<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Moteur Nitro<\/h3>\n\n\n\n<p>Nitro est un serveur complet qui utilise Rollup et <a href=\"https:\/\/thecodest.co\/fr\/blog\/find-your-node-js-expert-for-hire-today\/\">Node.js<\/a> en cours de d\u00e9veloppement afin d'isoler le code et le contexte. Il comprend \u00e9galement une API de serveur et un intergiciel de serveur. En production, le moteur construit l'application et le serveur dans un seul r\u00e9pertoire - `.output`. L'int\u00e9r\u00eat est que la sortie est l\u00e9g\u00e8re : minifi\u00e9e et sans aucune <a href=\"https:\/\/thecodest.co\/fr\/dictionary\/what-is-node-js-used-for\/\">n\u0153ud<\/a> modules. Nitro vous permet de d\u00e9ployer la sortie sur Node.js, Serverless, Workers, Edge-side rendering, ou comme purement statique.&nbsp;<\/p>\n\n\n\n<p><strong>Nuxt 3<\/strong> offre la possibilit\u00e9 de se d\u00e9ployer sur <a href=\"https:\/\/thecodest.co\/fr\/dictionary\/azure-developer\/\">L'azur<\/a> ou Netlify sans aucune configuration, ainsi qu'un d\u00e9ploiement Firebase ou Cloudflare avec une configuration minimale.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Vite<\/h3>\n\n\n\n<p>Vite est un outil frontal de nouvelle g\u00e9n\u00e9ration, qui est une fonctionnalit\u00e9 int\u00e9gr\u00e9e \u00e0 <strong> Nuxt 3<\/strong>. Cet outil permet d'acc\u00e9l\u00e9rer le d\u00e9veloppement des <a href=\"https:\/\/thecodest.co\/fr\/blog\/find-your-ideal-stack-for-web-development\/\">web<\/a> projets. Pour le d\u00e9veloppement, le serveur Vite dispose de riches am\u00e9liorations de fonctionnalit\u00e9s par rapport aux modules ES natifs et d'un remplacement tr\u00e8s rapide des modules \u00e0 chaud (HMR).<\/p>\n\n\n\n<p>Dans le processus de construction, Vite regroupe le code avec des Rollup pr\u00e9configur\u00e9s afin d'optimiser les actifs statiques pour la production.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Nouvelle structure de fichier<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/zrzut-ekranu-2022-05-25-o-08.52.47.png\" alt=\"exemple de structure de fichier \" title=\"structure du r\u00e9pertoire \"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/v3.nuxtjs.org\/docs\" rel=\"nofollow\">source<\/a><\/p>\n\n\n\n<p><strong>Nuxt 3<\/strong> introduit une structure de fichiers l\u00e9g\u00e8rement modifi\u00e9e. Les changements les plus importants ont \u00e9t\u00e9 faits dans `app.vue` - le r\u00e9pertoire `pages\/` est optionnel et s'il n'est pas pr\u00e9sent, l'application n'inclura pas de vue-router, ce qui est utile lors de la cr\u00e9ation d'une page de chargement ou d'une application qui n'a pas besoin de routage.&nbsp;<\/p>\n\n\n\n<p>Exemple de fichier app.vue :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">Bonjour le monde !<\/code><\/pre>\n\n\n\n<p>Pour inclure le routage, les pages et la mise en page, vous devez utiliser des composants int\u00e9gr\u00e9s, \u00e0 savoir `NuxtPage` et `NuxtLayout`. Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;div&gt;\n&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;\/p&gt;\n&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;\/p&gt;\n&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>`app.vue` est le composant principal de l'application <strong>Application Nuxt<\/strong>Ainsi, tout ce qui y est ajout\u00e9 sera global et inclus dans toutes les pages.&nbsp;<\/p>\n\n\n\n<p>La modification de la <strong>Nux<\/strong>La structure des r\u00e9pertoires implique le remplacement du r\u00e9pertoire `store\/` par le r\u00e9pertoire `composables\/`. <strong>Vue 3<\/strong>introduit des produits composables qui remplacent les magasins.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Migration de Vue 2 vers Vue 3 \u00e0 l'aide de Nuxt Bridge<\/h2>\n\n\n\n<p>Nuxt 3 introduit Nuxt Bridge - une couche de compatibilit\u00e9 ascendante qui met \u00e0 jour les applications Nuxt 2 avec les fonctionnalit\u00e9s de Nuxt 3, lui permettant de se mettre \u00e0 jour petit \u00e0 petit. Elle permet d'acc\u00e9der \u00e0 des fonctionnalit\u00e9s 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.<\/p>\n\n\n\n<p>Nuxt Bridge est r\u00e9trocompatible, de sorte que les plugins et modules existants fonctionneront toujours, tandis que la migration est facile et possible sans r\u00e9\u00e9crire l'ensemble de l'application.<\/p>\n\n\n\n<p>Pour activer Nuxt Bridge, vous devez vous assurer que le serveur de d\u00e9veloppement n'est pas en cours d'ex\u00e9cution, puis supprimer tous les fichiers de verrouillage des paquets et installer `nuxt-edge` :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">- \"nuxt\" : \"^2.15.0\"\n\n\"nuxt-edge\" : \"dernier\"<\/code><\/pre>\n\n\n\n<p>Ensuite, r\u00e9installez toutes les d\u00e9pendances :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">yarn install<\/code><\/pre>\n\n\n\n<p>Votre migration \u00e0 l'aide de Nuxt Bridge est termin\u00e9e !<\/p>\n\n\n\n<p>Une autre solution consiste \u00e0 installer <strong>Nuxt<\/strong> Bridge comme d\u00e9pendance de d\u00e9veloppement :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">yarn add --dev @nuxt\/bridge@npm:@nuxt\/bridge-edge<\/code><\/pre>\n\n\n\n<p>Il faut ensuite mettre \u00e0 jour les scripts dans `package.json` pour prendre en compte les changements que le serveur Nitro apporte au processus de construction.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/thecodest.co\/contact\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/interested_in_cooperation_.png\" alt=\"banni\u00e8re de coop\u00e9ration\"\/><\/a><\/figure>","protected":false},"excerpt":{"rendered":"<p>Nuxt 3 est la nouvelle g\u00e9n\u00e9ration du populaire framework hybride Vue, qui nous permet d'utiliser Vue pour construire des applications rendues c\u00f4t\u00e9 serveur. La version b\u00eata a \u00e9t\u00e9 lanc\u00e9e le 12 octobre 2021, apportant \u00e0 Nuxt Vue 3, un nouveau moteur d'introduction, un bundle plus l\u00e9ger et adhook Vite.<\/p>","protected":false},"author":2,"featured_media":3478,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3477","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Nuxt 3 - a Popular Hybrid Vue Framework - The Codest<\/title>\n<meta name=\"description\" content=\"Nuxt 3 is the next generation of the popular hybrid Vue framework, which allows us to use Vue for building server-side rendered applications. Beta version was launched on 12 October 2021, bringing into Nuxt Vue 3, a new intro engine, a lighter bundle and adhook Vite.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/fr\/blog\/nuxt-3-un-framework-vue-hybride-populaire\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Nuxt 3 - a Popular Hybrid Vue Framework\" \/>\n<meta property=\"og:description\" content=\"Nuxt 3 is the next generation of the popular hybrid Vue framework, which allows us to use Vue for building server-side rendered applications. Beta version was launched on 12 October 2021, bringing into Nuxt Vue 3, a new intro engine, a lighter bundle and adhook Vite.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/fr\/blog\/nuxt-3-un-framework-vue-hybride-populaire\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-25T06:21:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-28T14:07:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"Nuxt 3 &#8211; a Popular Hybrid Vue Framework\",\"datePublished\":\"2022-05-25T06:21:40+00:00\",\"dateModified\":\"2026-04-28T14:07:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/\"},\"wordCount\":700,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/nuxt_3.png\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/\",\"name\":\"Nuxt 3 - a Popular Hybrid Vue Framework - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/nuxt_3.png\",\"datePublished\":\"2022-05-25T06:21:40+00:00\",\"dateModified\":\"2026-04-28T14:07:07+00:00\",\"description\":\"Nuxt 3 is the next generation of the popular hybrid Vue framework, which allows us to use Vue for building server-side rendered applications. Beta version was launched on 12 October 2021, bringing into Nuxt Vue 3, a new intro engine, a lighter bundle and adhook Vite.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/nuxt_3.png\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/nuxt_3.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Nuxt 3 &#8211; a Popular Hybrid Vue Framework\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/fr\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Nuxt 3 - un cadre hybride populaire Vue - The Codest","description":"Nuxt 3 est la nouvelle g\u00e9n\u00e9ration du populaire framework hybride Vue, qui nous permet d'utiliser Vue pour construire des applications rendues c\u00f4t\u00e9 serveur. La version b\u00eata a \u00e9t\u00e9 lanc\u00e9e le 12 octobre 2021, apportant \u00e0 Nuxt Vue 3, un nouveau moteur d'introduction, un bundle plus l\u00e9ger et adhook Vite.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thecodest.co\/fr\/blog\/nuxt-3-un-framework-vue-hybride-populaire\/","og_locale":"fr_FR","og_type":"article","og_title":"Nuxt 3 - a Popular Hybrid Vue Framework","og_description":"Nuxt 3 is the next generation of the popular hybrid Vue framework, which allows us to use Vue for building server-side rendered applications. Beta version was launched on 12 October 2021, bringing into Nuxt Vue 3, a new intro engine, a lighter bundle and adhook Vite.","og_url":"https:\/\/thecodest.co\/fr\/blog\/nuxt-3-un-framework-vue-hybride-populaire\/","og_site_name":"The Codest","article_published_time":"2022-05-25T06:21:40+00:00","article_modified_time":"2026-04-28T14:07:07+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png","type":"image\/png"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"Nuxt 3 &#8211; a Popular Hybrid Vue Framework","datePublished":"2022-05-25T06:21:40+00:00","dateModified":"2026-04-28T14:07:07+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/"},"wordCount":700,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png","articleSection":["Software Development"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/","url":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/","name":"Nuxt 3 - un cadre hybride populaire Vue - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png","datePublished":"2022-05-25T06:21:40+00:00","dateModified":"2026-04-28T14:07:07+00:00","description":"Nuxt 3 est la nouvelle g\u00e9n\u00e9ration du populaire framework hybride Vue, qui nous permet d'utiliser Vue pour construire des applications rendues c\u00f4t\u00e9 serveur. La version b\u00eata a \u00e9t\u00e9 lanc\u00e9e le 12 octobre 2021, apportant \u00e0 Nuxt Vue 3, un nouveau moteur d'introduction, un bundle plus l\u00e9ger et adhook Vite.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"Nuxt 3 &#8211; a Popular Hybrid Vue Framework"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"The Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/fr\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/posts\/3477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/comments?post=3477"}],"version-history":[{"count":8,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/posts\/3477\/revisions"}],"predecessor-version":[{"id":8376,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/posts\/3477\/revisions\/8376"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/media\/3478"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/media?parent=3477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/categories?post=3477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/tags?post=3477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}