[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-settings":3,"blogpost-understanding-nuxt-3-part-i":72},{"footer":4,"contact_form":6,"chat_widget":11,"accolades":19,"seo_social":63},{"iso_notice":5},"Wolfpack Digital is an ISO 9001:2015, ISO 27001:2013 and ISO 14001:2015 certified company - © _YEAR_ Wolfpack Digital. All rights reserved.",{"budgets":7},[8,9,10],"Under $50.000","Between $50.000 - 200.000","Over $200.000",{"consent":12},{"greeting":13,"title":14,"body":15,"accept_label":16,"decline_label":17,"declined_message":18},"Awoo! I'm Wolfpack Digital's AI assistant. Ask me anything about our services, process, or team, and if you want a project estimate, I can point you to our AI Estimator.","Data Privacy","\u003Cp>Hi there! We would love to talk with you. Under the EU General Data Protection Regulation, we need your approval for our use of personal information (e.g. your name and email address) you may provide as we communicate:\u003C\u002Fp>\n\u003Col>\n  \u003Cli>We'll store your personal information so that we can pick up the conversation if we talk later.\u003C\u002Fli>\n  \u003Cli>We may send you emails to follow up on our discussion here.\u003C\u002Fli>\n  \u003Cli>We may send you emails about our upcoming services and promotions.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Is this okay with you?\u003C\u002Fp>","Yes, I Accept","No, Not Now","No problem. Come back if you change your mind.",{"winnersOfList":20,"awardsList":29,"inHouseAppImages":46,"certificationsList":50},[21,25],{"alt":22,"href":23,"image":24},"European Awards","https:\u002F\u002Fwww.theeuropeanawards.eu\u002Fpremiado\u002Fwolfpack-digital-awarded-in-the-app-development-category","\u002Fimages\u002Fabout-us\u002Fwinners\u002Feuropean.svg",{"alt":26,"href":27,"image":28},"Webby Awards","https:\u002F\u002Fwinners.webbyawards.com\u002F2024\u002Fwebsites-and-mobile-sites\u002Fresponsible-technology\u002Fresponsible-ai\u002F275408\u002Fequality-ai-fair-and-unbiased-algorithms-to-eliminate-discrimination-in-machine-learning-models","\u002Fimages\u002Fabout-us\u002Fwinners\u002Fwebby.svg",[30,34,38,42],{"alt":31,"href":32,"image":33},"Clutch 1000 List Reveals Top-Rated Business Service Providers of 2023","https:\u002F\u002Fclutch.co\u002Fpress-releases\u002Fclutch-1000-fall-2023","\u002Fimages\u002Fabout-us\u002Fawards\u002Fclutch.svg",{"alt":35,"href":36,"image":37},"Clutch Recognizes the 1000 Best B2B Service Providers in its Exclusive 2019 Clutch 1000 List","https:\u002F\u002Fclutch.co\u002Fpress-releases\u002Frecognizes-1000-best-b2b-service-providers-its-exclusive-2019-1000-list","\u002Fimages\u002Fabout-us\u002Fawards\u002Fglobal.svg",{"alt":39,"href":40,"image":41},"Mobile App Daily Award","","\u002Fimages\u002Fabout-us\u002Fawards\u002Fmobile-app-daily.svg",{"alt":43,"href":44,"image":45},"Manifest Award","https:\u002F\u002Fthemanifest.com\u002Fro\u002Fweb-development\u002Fcompanies","\u002Fimages\u002Fabout-us\u002Fawards\u002Fmanifest.svg",[47],{"alt":48,"href":40,"image":49},"Wolfpack Labs","\u002Fimages\u002Fhomepage\u002Fawards\u002Flabs.svg",[51,55,59],{"alt":52,"href":53,"image":54},"ISO 27001 Certification","https:\u002F\u002Fwww.qscert.com\u002Fcs\u002Fissued-certificates\u002F?certID=_7690LD367","\u002Fimages\u002Fabout-us\u002Fcertifications\u002Fiso-27001.svg",{"alt":56,"href":57,"image":58},"ISO 9001 Certification","https:\u002F\u002Fwww.qscert.com\u002Fcs\u002Fissued-certificates\u002F?certID=_7690LBDB0","\u002Fimages\u002Fabout-us\u002Fcertifications\u002Fiso-9001.svg",{"alt":60,"href":61,"image":62},"ISO 14001 Certification","https:\u002F\u002Fwww.qscert.com\u002Fma\u002Fissued-certificates\u002F?certID=_7690LZSGS","\u002Fimages\u002Fabout-us\u002Fcertifications\u002Fiso-14001.svg",{"default_og_image_urls":64,"default_og_image_alt":68,"og_site_name":68,"og_locale":69,"twitter_site":70,"page_type_defaults":71},[65],{"style":66,"url":67},"og","\u002Fimages\u002Fsocial_share_preview.jpg","Wolfpack Digital","en_US","@DigitalWolfpack",{},["Reactive",73],{"title":74,"body":75,"slug":76,"featured_image_urls":77,"meta_tags":102,"reading_time":112,"title_size":113,"tag_list":114,"formatted_published_at":115,"short_description":116,"categories":117,"alt_text":110,"published_at":119,"content_updated_at":120,"formatted_content_updated_at":121,"key_takeaways":122,"faqs":128,"updated_at":141,"canonical_override":40,"no_index":142,"canonical_url":143,"publishers":144},"Understanding Nuxt 3 - Part I","\u003Ch2>Why Nuxt 3 still matters in 2026\u003C\u002Fh2>\u003Cp>In web development, you can't learn one tech stack and coast to seniority. You have to keep learning. Technical debt is a real part of the job. In your first years of coding, that may not feel obvious. With experience, though, the pattern becomes clear. Prioritising speed over clean code has a cost. That cost for future reworking \u003Cstrong>will\u003C\u002Fstrong> show up sooner or later.\u003C\u002Fp>\u003Cp>So, as cliché as it sounds, becoming a strong developer is a journey, \u003Cstrong>not\u003C\u002Fstrong> a destination. The first years of learning a language can feel like a burden. Yet as your skills grow, you learn to write neat, maintainable code. More importantly, you learn to adapt to change. That, in my opinion, is the key skill for a career in web development.\u003C\u002Fp>\u003Cp>Unless you code in COBOL, your language \u003Cstrong>will\u003C\u002Fstrong> change. Expect bug fixes, performance and feature improvements, community polish, and deprecations. So how do I like to think about writing maintainable code?\u003C\u002Fp>\u003Cp>\u003Cem>Write code as if you'll need to refactor it in two years.\u003C\u002Fem>\u003C\u002Fp>\u003Cp>With that mindset, let's dive into Nuxt 3 and see how the Composition API differs from the older Options API used in Nuxt 2. A quick note on versions first. Nuxt 4 is now the current stable release, and Nuxt 3 entered maintenance mode in mid-2026. The good news is that almost everything in this guide still applies. Nuxt 4 builds directly on the Nuxt 3 foundations, so the concepts below carry forward. For the latest version details, always check the \u003Ca href=\"https:\u002F\u002Fnuxt.com\" rel=\"noopener noreferrer\" target=\"_blank\">official Nuxt documentation\u003C\u002Fa>.\u003C\u002Fp>\u003Ch2>Nuxt 3 vs Nuxt 2: what changed\u003C\u002Fh2>\u003Cp>Let's look at some of Nuxt 3's additions and what makes them different from Nuxt 2.\u003C\u002Fp>\u003Col>\n\u003Cul>\u003Cli>Nuxt 3 is aligned with Vue 3. You can use all the great Vue 3 features, such as the Composition API and composables. Nuxt ships built-in composables too, like \u003Cem>useFetch()\u003C\u002Fem>, \u003Cem>useState()\u003C\u002Fem>, and \u003Cem>useHead()\u003C\u002Fem>.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>It uses the h3 web server, an upgrade from the connect server in Nuxt 2.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>It uses Vite for bundling and can support webpack via a plugin.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>It offers flexible dynamic pages. You can make just part of a file name dynamic with the new bracket syntax that replaces the old underscore syntax.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>It handles metadata and SEO through composables.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>It runs on Nitro, a server and serverless engine.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>Nuxi is the Nuxt CLI. It gives you a zero-dependency way to scaffold projects and add modules.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>It comes with a new directory structure and no routing by default.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>It has a much smaller bundle size on both client and server.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>It's fast. Bundling and hot reloading feel almost instant, thanks to Vite.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>It introduces hybrid \u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Ca href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fblogposts\u002Fspa-csr-ssr-ssg-demystifying-rendering-modes\" rel=\"noopener noreferrer\" target=\"_blank\">rendering\u003C\u002Fa>\u003C\u002Fstrong>, so you can choose per page between server-side rendering and static rendering with caching.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>It's SEO friendly out of the box.\u003C\u002Fli>\u003C\u002Ful>\n\u003C\u002Fol>\u003Cp>Next, let's break down some of the most notable features so these new terms make sense.\u003C\u002Fp>\u003Ch2>1. The Composition API\u003C\u002Fh2>\u003Cp>Until Vue 3, there was one official way to build a Vue component: the Options API. Logic was split into separate parts like data, methods, computed, and watchers. With the Composition API, you can do all of that in a more organised way. The result is cleaner code that's easier to manage.\u003C\u002Fp>\u003Cp>The main advantage of the Composition API is more efficient logic reuse. It solves the drawbacks of mixins. It also removes the need to scatter code across different sections of a file.\u003C\u002Fp>\u003Cp>Let's look at how much code sits in a folder explorer component from Vue CLI's GUI. The Composition API looks far more organised. You don't have to jump around the file to work out what goes where.\u003C\u002Fp>\u003Cp>\u003Cimg src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F721\u002Fcontent_d17b803f-245f-4e1b-9ce0-9ae688eda715.png\" alt=\"Side-by-side code comparison showing Vue Options API on the left split into many colour-coded sections and the more compact Composition API on the right\">\u003C\u002Fp>\u003Cp class=\"ql-align-center\">\u003Cem>Source: \u003C\u002Fem>\u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Cem>\u003Ca href=\"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fextras\u002Fcomposition-api-faq.html#more-flexible-code-organization\" rel=\"noopener noreferrer\" target=\"_blank\">Vue.js Composition API FAQ\u003C\u002Fa>\u003C\u002Fem>\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>In a nutshell, the Composition API solves two big limitations of the Options API.\u003C\u002Fp>\u003Col>\n\u003Cul>\u003Cli>It groups related pieces of code together using hooks.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>It makes it easy to reuse code across your app with composables.\u003C\u002Fli>\u003C\u002Ful>\n\u003C\u002Fol>\u003Cp>\u003Cstrong>Vue composables\u003C\u002Fstrong> are functions that use the Composition API to build reactive, reusable logic. A composable acts as an external function. It extracts reactive state and behaviour so you can share it across components. This is similar to Options API mixins.\u003C\u002Fp>\u003Cp>Composables can also be nested. One composable can call one or more others. That lets you break complex logic into smaller units, much like you split an app into components.\u003C\u002Fp>\u003Cp>The Composition API in Nuxt 3 \u003Cstrong>does not\u003C\u002Fstrong> replace the Options API. Developers can use \u003Cstrong>either\u003C\u002Fstrong> API or \u003Cstrong>both\u003C\u002Fstrong>, based on their needs and preferences.\u003C\u002Fp>\u003Cp>The \u003Cem><script setup>\u003C\u002Fem> tag defines a component's reactive state, computed properties, and functions using Composition API syntax. The plain \u003Cem><script>\u003C\u002Fem> tag tells Nuxt you're using the Options API. Let's see a basic example of both working together. Notice that we define the hello message with a \u003Cem>ref()\u003C\u002Fem> function instead of \u003Cem>data()\u003C\u002Fem>. This is the new way to declare reactivity in Vue 3, so let's explore the new Reactivity API next.\u003C\u002Fp>\u003Cp>\u003Cimg src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F722\u002Fcontent_29437a9b-ee26-4f5d-8468-1f25ae3906a3.png\" alt=\"Vue component code screenshot with an Options API script block using data() and a script setup block importing ref from vue\">\u003C\u002Fp>\u003Ch2>2. Reactivity with the Composition API\u003C\u002Fh2>\u003Cp>In Vue 2, we used the \u003Cem>data()\u003C\u002Fem> function to declare all variables. In Vue 3, we have two functions for reactive data: \u003Cem>ref()\u003C\u002Fem> and \u003Cem>reactive()\u003C\u002Fem>. The key difference is simple. The \u003Cem>ref()\u003C\u002Fem> function declares reactive state \u003Cstrong>for primitives and objects\u003C\u002Fstrong>. The \u003Cem>reactive()\u003C\u002Fem> function \u003Cstrong>only\u003C\u002Fstrong> declares reactive state for \u003Cstrong>objects\u003C\u002Fstrong>. Let's look at some example code.\u003C\u002Fp>\u003Cp>\u003Cstrong>Ref()\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>\u003Cimg src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F725\u002Fcontent_ce8e04b8-1eab-45f8-8d50-07510b734fee.png\" alt=\"Vue 3 code screenshot using ref to create a reactive count, an increment function calling count.value++, and a template button\">\u003C\u002Fp>\u003Cp>The \u003Cem>ref()\u003C\u002Fem> method takes a single value and returns a mutable, reactive object. To read the tracked value, you access the \u003Cem>value\u003C\u002Fem> property. When refs are used as top-level properties in the template, Vue unwraps them automatically. So you don't need \u003Cem>.value\u003C\u002Fem> there.\u003C\u002Fp>\u003Cp>\u003Cstrong>Reactive()\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>\u003Cimg src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F724\u002Fcontent_0c2ec430-c5b5-43d9-ada3-789a221a9084.png\" alt=\"Vue 3 code screenshot using reactive state with an increment function calling state.count++ and a template button showing state.count\">\u003C\u002Fp>\u003Cp>Unlike \u003Cem>ref()\u003C\u002Fem>, \u003Cem>reactive()\u003C\u002Fem> only works with an object. Each property of that object can be its own reactive variable. You also don't need an intermediary \u003Cem>.value\u003C\u002Fem> property to read or update it. You can access the object's properties directly.\u003C\u002Fp>\u003Cp>So when should you choose one over the other?\u003C\u002Fp>\u003Cp>Use \u003Cem>ref()\u003C\u002Fem> for primitives, always. Keep in mind that \u003Cem>ref()\u003C\u002Fem> also suits objects that need to be reassigned, such as an array. With \u003Cem>reactive([])\u003C\u002Fem>, Vue tracks mutations of that array. But you can't \u003Cstrong>swap\u003C\u002Fstrong> it for a different array.\u003C\u002Fp>\u003Ch2>3. The Nuxt 3 directory structure\u003C\u002Fh2>\u003Cp>A nice Nuxt 3 feature is auto-import for Vue APIs like \u003Cem>ref()\u003C\u002Fem> and \u003Cem>reactive()\u003C\u002Fem>. This speeds up how you write code. It means the examples above would work without the \u003Cem>import\u003C\u002Fem> statement under \u003Cem><script setup>\u003C\u002Fem>.\u003C\u002Fp>\u003Cp>Auto-import also works for components, composables, and helper functions by default. Every exported function and variable in the \u003Cem>components\u002F\u003C\u002Fem>, \u003Cem>composables\u002F\u003C\u002Fem>, and \u003Cem>utils\u002F\u003C\u002Fem> folders is available in any component. No explicit import needed.\u003C\u002Fp>\u003Cp>Want to disable auto-imports? Set \u003Cem>imports.autoImport\u003C\u002Fem> to \u003Cem>false\u003C\u002Fem> in your \u003Cem>nuxt.config.ts\u003C\u002Fem>.\u003C\u002Fp>\u003Cp>Now let's look at this diagram and walk through the skeleton of a Nuxt 3 app.\u003C\u002Fp>\u003Cp>\u003Cimg src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F726\u002Fcontent_70e35815-d62e-4d67-b9f8-233dd279c9ae.jpeg\" alt=\"Nuxt 3 directory structure diagram mapping folders like composables, layouts, components, pages, server, plugins, modules, utils and public\">\u003C\u002Fp>\u003Cp class=\"ql-align-center\">\u003Cem>Source: \u003C\u002Fem>\u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Cem>\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FKrutiePatel\u002Fstatus\u002F1617431336402440194?lang=en\" rel=\"noopener noreferrer\" target=\"_blank\">Krutie Patel on Twitter\u003C\u002Fa>\u003C\u002Fem>\u003C\u002Fstrong>\u003C\u002Fp>\u003Col>\n\u003Cul>\u003Cli>An \u003Cem>app.vue\u003C\u002Fem> file is added. It's the main component of your app. Anything you put in it, such as CSS or JS, is global and included on every page.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>The \u003Cem>pages\u002F\u003C\u002Fem> directory is optional. You can build an app with just \u003Cem>app.vue\u003C\u002Fem> and components in \u003Cem>components\u002F\u003C\u002Fem>. In that case, vue-router isn't used and the build is much lighter.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>A new \u003Cem>composables\u002F\u003C\u002Fem> directory is added. Each composable here is auto-imported, so you can use it directly.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>The \u003Cem>.output\u002F\u003C\u002Fem> folder holds all build files after \u003Cem>nuxt build\u003C\u002Fem>. The \u003Cem>.nuxt\u002F\u003C\u002Fem> directory holds everything needed to generate your app. Don't edit files in either one.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>The \u003Cem>assets\u002F\u003C\u002Fem> folder holds assets the build tools process, usually stylesheets, fonts, and images that the server won't serve directly.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>The \u003Cem>layouts\u002F\u003C\u002Fem> folder works as it did in Nuxt 2. It extracts common UI patterns into reusable layout components.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>The \u003Cem>middleware\u002F\u003C\u002Fem> folder holds functions that run before you visit a given route.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>The \u003Cem>public\u002F\u003C\u002Fem> folder was the \u003Cem>static\u003C\u002Fem> folder in Nuxt 2. It's served at the server root and holds files that keep their names, like \u003Cem>robots.txt\u003C\u002Fem>, or rarely change, like \u003Cem>favicon.ico\u003C\u002Fem>.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>The \u003Cem>plugins\u002F\u003C\u002Fem> folder adds app-level functionality. Nuxt reads these files and loads them when the Vue app is created.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>The \u003Cem>modules\u002F\u003C\u002Fem> folder provides a module system that extends the core. Modules are functions called in sequence when Nuxt boots.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>The \u003Cem>utils\u002F\u003C\u002Fem> directory auto-imports helper functions across your app.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>Inside the \u003Cem>server\u002F\u003C\u002Fem> folder, the \u003Cem>~\u002Fserver\u002Fapi\u003C\u002Fem>, \u003Cem>~\u002Fserver\u002Froutes\u003C\u002Fem>, and \u003Cem>~\u002Fserver\u002Fmiddleware\u003C\u002Fem> directories register API and server handlers with HMR support. Like frameworks such as Express, keeping server and client code in one codebase is convenient. It saves you from maintaining a separate API project.\u003C\u002Fli>\u003C\u002Ful>\n\u003C\u002Fol>\u003Ch2>Wrapping up\u003C\u002Fh2>\u003Cp>In this first part, we covered the major differences between Nuxt 3 and Nuxt 2 and toured the new folder structure. We saw what the Composition API looks like and learned new ways to declare reactive data. My advice is to read the official Nuxt 3 and Vue 3 docs and play with these concepts on StackBlitz, the online IDE you'll see in the docs.\u003C\u002Fp>\u003Cp>Why get a firm grip on these fundamentals? Because they set the base for the next chapter: state management. In \u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Ca href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fblogposts\u002Fundestanding-nuxt-3-part-ii\" rel=\"noopener noreferrer\" target=\"_blank\">Understanding Nuxt 3 - Part II\u003C\u002Fa>\u003C\u002Fstrong>, we'll see how \u003Cem>ref()\u003C\u002Fem> and \u003Cem>reactive()\u003C\u002Fem> help manage state across components. We'll also build a Nuxt 3 app from scratch.\u003C\u002Fp>\u003Cp>Want a team that ships production-grade Nuxt and Vue apps? Explore our \u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Ca href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Ftechnologies\u002Fnuxt-js\" rel=\"noopener noreferrer\" target=\"_blank\">Nuxt.js development\u003C\u002Fa>\u003C\u002Fstrong> and \u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Ca href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Ftechnologies\u002Fvue-js\" rel=\"noopener noreferrer\" target=\"_blank\">Vue.js development\u003C\u002Fa>\u003C\u002Fstrong> services, or see how our \u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Ca href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fservices\u002Fweb-development\" rel=\"noopener noreferrer\" target=\"_blank\">web development team\u003C\u002Fa>\u003C\u002Fstrong> works. Until then, thanks for reading and happy coding.\u003C\u002Fp>","understanding-nuxt-3-part-i",[78,81,84,87,90,93,96,99],{"style":79,"url":80},"640","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F259\u002Ffeatured_image\u002F640\u002FNuxt%203%20Blogpost.webp",{"style":82,"url":83},"768","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F259\u002Ffeatured_image\u002F768\u002FNuxt%203%20Blogpost.webp",{"style":85,"url":86},"1024","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F259\u002Ffeatured_image\u002F1024\u002FNuxt%203%20Blogpost.webp",{"style":88,"url":89},"1366","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F259\u002Ffeatured_image\u002F1366\u002FNuxt%203%20Blogpost.webp",{"style":91,"url":92},"1600","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F259\u002Ffeatured_image\u002F1600\u002FNuxt%203%20Blogpost.webp",{"style":94,"url":95},"1920","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F259\u002Ffeatured_image\u002F1920\u002FNuxt%203%20Blogpost.webp",{"style":97,"url":98},"thumb","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F259\u002Ffeatured_image\u002Fthumb\u002FNuxt%203%20Blogpost.webp",{"style":100,"url":101},"original","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F259\u002Ffeatured_image\u002Foriginal\u002FNuxt%203%20Blogpost.webp",{"title":103,"description":104,"keywords":105,"contact_form:title":106,"contact_form:cta":107,"og:site_name":68,"og:type":108,"og:locale":69,"twitter:card":109,"twitter:site":70,"twitter:creator":70,"og:title":103,"og:image:alt":110,"twitter:title":103,"og:description":111,"twitter:description":111},"Understanding Nuxt 3: Composition API | Wolfpack Digital","Understanding Nuxt 3: how the Composition API, ref, reactive, composables and the new directory structure work, plus where Nuxt 3 sits now Nuxt 4 is out.","nuxt 3, nuxt js, nuxt composition api, vue composition api, nuxt reactivity, wolfpack digital","contact us","send message","article","summary_large_image","Illustration of a developer holding up a card with the Vue and Nuxt code chevron logo beside colourful code, on a teal background","How the Composition API, ref, reactive, composables and the directory structure work in Nuxt 3, plus where Nuxt 3 sits now Nuxt 4 is out.","7",32,[],"Apr 27, 2023","A developer-friendly guide to Nuxt 3: the Composition API, reactivity with ref() and reactive(), composables, and the new directory structure. We also cover where Nuxt 3 sits now that Nuxt 4 is the current stable release.",[118],"web-development","2023-04-27T08:49:15.000Z","2026-07-02T06:49:08.581Z","Jul 2, 2026",[123,124,125,126,127],"Nuxt 4 is now the current stable release and Nuxt 3 has entered maintenance mode, but the Nuxt 3 concepts in this guide still apply because Nuxt 4 builds on them.","Nuxt 3 aligns with Vue 3, so you get the Composition API, composables, and built-in helpers like useFetch, useState, and useHead.","The Composition API groups related logic with hooks and enables clean code reuse through composables, without replacing the Options API.","Vue 3 offers two reactivity functions: use ref() for primitives and reassignable values, and reactive() for objects.","Nuxt 3 introduces a new directory structure with auto-imports for components, composables, and utilities, so you write less boilerplate.",[129,132,135,138],{"answer":130,"question":131},"Yes. Nuxt 4 is now the current stable release and Nuxt 3 has moved into maintenance mode, but Nuxt 4 builds directly on the Nuxt 3 foundations. The Composition API, reactivity, composables, and directory structure covered here all carry forward, so learning Nuxt 3 sets you up for Nuxt 4.","Is Nuxt 3 still worth learning in 2026?",{"answer":133,"question":134},"The ref() function creates reactive state for both primitives and objects, and you access its value through the .value property. The reactive() function only works with objects and lets you read or update properties directly. Use ref() for primitives and for values you may reassign, such as arrays.","What is the difference between ref() and reactive() in Vue 3?",{"answer":136,"question":137},"The Composition API is a way to organise component logic in Vue 3 and Nuxt 3. Instead of splitting code into data, methods, computed, and watchers like the Options API, it groups related logic together and makes reuse easy through composables. It does not replace the Options API; you can use either or both.","What is the Composition API in Nuxt 3?",{"answer":139,"question":140},"No. The pages directory is optional. You can build an app using only app.vue and components in the components folder. When you skip the pages directory, vue-router is not included and the resulting build is much lighter.","Does Nuxt 3 require the pages directory?","2026-07-06T12:08:26.870Z",false,"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fblogposts\u002Funderstanding-nuxt-3-part-i",[145],{"id":146,"author":147,"short_description":148,"role":149,"avatar_urls":150,"cover_urls":158,"linkedin_link":177,"instagram_link":40,"x_link":40,"meta_tags":178,"last_published_at":180,"same_as":181},54,"Roxi","Roxi got her bachelor's degree in Computer Science in 2016 and has been working with JavaScript ever since. She has an eye for pixel-perfect UI, smooth UX, and likes to experiment with all sorts of eye-catching designs while keeping a web app’s performance at its peak.\r\n\r\nBesides the geeky stuff, Roxana has been doing CrossFit for more than 7 years now and has an Instagram page called @eatincluj where she reviews all sorts of restaurants, dishes, and dining experiences - because indeed, eating delicious food goes hand-in-hand with an active and healthy lifestyle.","Front-end Developer",[151,153,156],{"style":97,"url":152},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Favatar\u002Fthumb\u002Fimage%20%2821%29.webp",{"style":154,"url":155},"medium","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Favatar\u002Fmedium\u002Fimage%20%2821%29.webp",{"style":100,"url":157},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Favatar\u002Foriginal\u002Fimage%20%2821%29.webp",[159,161,163,165,167,169,171,173,175],{"style":79,"url":160},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Fcover_image\u002F640\u002FRoxi.webp",{"style":82,"url":162},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Fcover_image\u002F768\u002FRoxi.webp",{"style":85,"url":164},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Fcover_image\u002F1024\u002FRoxi.webp",{"style":88,"url":166},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Fcover_image\u002F1366\u002FRoxi.webp",{"style":91,"url":168},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Fcover_image\u002F1600\u002FRoxi.webp",{"style":94,"url":170},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Fcover_image\u002F1920\u002FRoxi.webp",{"style":97,"url":172},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Fcover_image\u002Fthumb\u002FRoxi.webp",{"style":154,"url":174},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Fcover_image\u002Fmedium\u002FRoxi.webp",{"style":100,"url":176},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Fcover_image\u002Foriginal\u002FRoxi.webp","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Froxana-popescu-eatincluj\u002F",{"title":147,"description":149,"keywords":40,"contact_form:title":106,"contact_form:cta":107,"og:site_name":68,"og:type":179,"og:locale":69,"twitter:card":109,"twitter:site":70,"twitter:creator":70},"website","2023-05-19T07:00:00.000Z",[177]]