{"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-a-popular-hybrid-vue-framework","status":"publish","type":"post","link":"https:\/\/thecodest.co\/en\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/","title":{"rendered":"Nuxt 3 &#8211; a Popular Hybrid Vue Framework"},"content":{"rendered":"\n<p><strong>Nuxt 3<\/strong> has been re-architected and re-written to support ESM and <a href=\"https:\/\/thecodest.co\/en\/dictionary\/typescript-developer\/\">TypeScript<\/a> natively. It\u2019s currently unstable, which makes it not yet production-ready. The first candidate (nuxt@3.0.0-rc.1) is planned to be released on 7 April 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=\"Nuxt table \" title=\"Nuxt comparison table \"\/><\/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\">Starting a new project<\/h2>\n\n\n\n<p>Open a terminal or open an integrated terminal from Visual Studio <a href=\"https:\/\/thecodest.co\/en\/dictionary\/what-is-code-refactoring\/\">Code<\/a> and use the following command to create a new starter <a href=\"https:\/\/thecodest.co\/en\/dictionary\/why-do-projects-fail\/\">project<\/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>Open the nuxt3-app folder:<\/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>Install the dependencies:<\/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>Run the development server:<\/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>Build the application:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code><code><code><code>yarn build<\/code><\/code><\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<p>Run the built application:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code><code><code><code><code>yarn start<\/code><\/code><\/code><\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">What\u2019s new?<\/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\/en\/blog\/hire-vue-js-developers\/\">Vue<\/a> 3<\/strong> came with several new features that make building and maintaining applications a lot faster and easier. The most important changes are made to Global Vue <a href=\"https:\/\/thecodest.co\/en\/blog\/compare-staff-augmentation-firms-that-excel-in-api-team-staffing-for-financial-technology-projects\/\">API<\/a> and Events API. <strong>Vue 3<\/strong>also introduces new features like provide \/ inject, composition API (described below), Fragments, and Teleport.<\/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>Composition API is a built-in Vue 3 feature, which provides a set of APIs, which allows the use of imported functions instead of declaring options. So, the main advantages of Composition API are better logic reuse, more flexible code organization and great TypeScript integration. All parts of the new API can be used outside of <strong>Vue<\/strong> components.<\/p>\n\n\n\n<p><strong>Nuxt 3<\/strong> provides a new directory &#8211; <code>composables\/<\/code> &#8211; that allows to auto-import Vue composables intro application.<\/p>\n\n\n\n<p>Example composable:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code><code><code><code><code><code>\/\/ It will be available as useFoo() (camelCase of file name without extension)\n export default function () {\n   return useState('foo', () => 'bar')<code>\/\/ It will be available as useFoo() (camelCase of file name without extension)\n export default function () {\n   return useState('foo', () => 'bar')\n }<\/code>\n }<\/code><\/code><\/code><\/code><\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<p>Example of using a composable in a <strong>Vue<\/strong> component:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;div>{{ foo }}&lt;\/div>\n&lt;\/><\/code><\/pre>\n\n\n\n<p>As you can see above, a composable is exported as useFoo, just as declared in the const name. If there is no export name, the composable will be accessible as pascelCase of the file name. It also allows you to easily integrate auto-imported composables with a popular Vue Store composable called <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=\"API structure example \" title=\"Options and Composition API \"\/><\/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\">Nitro Engine<\/h3>\n\n\n\n<p>Nitro is a full-stack server which uses Rollup and <a href=\"https:\/\/thecodest.co\/en\/blog\/find-your-node-js-expert-for-hire-today\/\">Node.js<\/a> workers in development to serve code and context isolation. It also includes a server API and server middleware. In production, the engine builds the application and the server into one directory &#8211; `.output`. The thing is that output is lightweight: minified and without any <a href=\"https:\/\/thecodest.co\/en\/dictionary\/what-is-node-js-used-for\/\">node<\/a> modules. Nitro allows you to deploy the output on Node.js, Serverless, Workers, Edge-side rendering, or as purely static.&nbsp;<\/p>\n\n\n\n<p><strong>Nuxt 3<\/strong> provides the possibility to deploy on <a href=\"https:\/\/thecodest.co\/en\/dictionary\/azure-developer\/\">Azure<\/a> or Netlify with no configuration required, along with a Firebase or Cloudflare deploy with minimal configuration.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Vite<\/h3>\n\n\n\n<p>Vite is a next-generation frontend tooling, which is a built-in feature for <strong> Nuxt 3<\/strong>. This tool provides a faster development experience for <a href=\"https:\/\/thecodest.co\/en\/blog\/find-your-ideal-stack-for-web-development\/\">web<\/a> projects. For development, the server Vite has rich feature enhancements over native ES modules and a very fast Hot Module Replacement (HMR).<\/p>\n\n\n\n<p>In the building process, Vite bundles code with preconfigured Rollup to optimize static assets for production.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">New file structure<\/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=\"file structure example \" title=\"directory structure \"\/><\/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> introduces a slightly changed file structure. The biggest changes were done to `app.vue` &#8211; `pages\/` directory is optional and if isn\u2019t present, the application won\u2019t include a vue-router, which is useful when creating a loading page or an application that doesn\u2019t need routing.&nbsp;<\/p>\n\n\n\n<p>Example app.vue file:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">Hello World!<\/code><\/pre>\n\n\n\n<p>To include routing, pages and layout, you need to use built-in components, namely `NuxtPage` and `NuxtLayout`. Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;div>\n&lt;p>&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;\/p>\n&lt;p>&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;\/p>\n&lt;p>&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;\/p>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>`app.vue` is the main component of the <strong>Nuxt application<\/strong>, so everything added there will be global and included in every page.&nbsp;<\/p>\n\n\n\n<p>The change in the <strong>Nux<\/strong>t directory structure involves replacing `store\/` with `composables\/` directory, since <strong>Vue 3<\/strong>introduces composables which replaces stores.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Migrating from Vue 2 to Vue 3 using Nuxt Bridge<\/h2>\n\n\n\n<p>Nuxt 3 introduces Nuxt Bridge &#8211; forward-compatibility layer that upgrades Nuxt 2 applications with Nuxt 3 features, allowing it to upgrade itself piece by piece. It provides access to features like: Nitro engine, composition API and new CLI, by simply installing and activating the bridge.<\/p>\n\n\n\n<p>Nuxt Bridge is backward compatible, so legacy plugins and modules will still work, while migrating is easy and possible without rewriting the whole application.<\/p>\n\n\n\n<p>To enable Nuxt Bridge, you have to make sure that the dev server isn\u2019t running, then remove any package lock files and install `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\": \"latest\"<\/code><\/pre>\n\n\n\n<p>After that, reinstall all dependencies:<\/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>Your migration using Nuxt Bridge is done!<\/p>\n\n\n\n<p>Another way is to install <strong>Nuxt<\/strong> Bridge as a development dependency:<\/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>Then you have to update scripts in `package.json` to take into account changes that the Nitro server brings to the building process.<\/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=\"cooperation banner\"\/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","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\/en\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\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\/en\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/\" \/>\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\":\"en-US\",\"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\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@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\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@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\":\"en-US\",\"@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\\\/en\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Nuxt 3 - a Popular Hybrid Vue Framework - The Codest","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.","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\/en\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/","og_locale":"en_US","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\/en\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/","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":"en-US","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":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@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":"en-US"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@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":"en-US","@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\/en\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/en\/wp-json\/wp\/v2\/posts\/3477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/en\/wp-json\/wp\/v2\/comments?post=3477"}],"version-history":[{"count":8,"href":"https:\/\/thecodest.co\/en\/wp-json\/wp\/v2\/posts\/3477\/revisions"}],"predecessor-version":[{"id":8376,"href":"https:\/\/thecodest.co\/en\/wp-json\/wp\/v2\/posts\/3477\/revisions\/8376"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/en\/wp-json\/wp\/v2\/media\/3478"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/en\/wp-json\/wp\/v2\/media?parent=3477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/en\/wp-json\/wp\/v2\/categories?post=3477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/en\/wp-json\/wp\/v2\/tags?post=3477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}