[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-settings":3,"blogpost-undestanding-nuxt-3-part-ii":76},{"footer":4,"contact_form":6,"chat_widget":11,"accolades":19,"seo_social":67},{"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":33,"inHouseAppImages":50,"certificationsList":54},[21,25,29],{"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",{"alt":30,"href":31,"image":32},"Wolfpack Digital — Gold, Digital & Creative Agency Excellence, eir business Chambers Ireland Awards 2026","https:\u002F\u002Fchambersawards.ie\u002F2026-winners\u002F","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fcb786b7ba09fce584e78fac33bc70a07.png",[34,38,42,46],{"alt":35,"href":36,"image":37},"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":39,"href":40,"image":41},"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":43,"href":44,"image":45},"Mobile App Daily Award","","\u002Fimages\u002Fabout-us\u002Fawards\u002Fmobile-app-daily.svg",{"alt":47,"href":48,"image":49},"Manifest Award","https:\u002F\u002Fthemanifest.com\u002Fro\u002Fweb-development\u002Fcompanies","\u002Fimages\u002Fabout-us\u002Fawards\u002Fmanifest.svg",[51],{"alt":52,"href":44,"image":53},"Wolfpack Labs","\u002Fimages\u002Fhomepage\u002Fawards\u002Flabs.svg",[55,59,63],{"alt":56,"href":57,"image":58},"ISO 27001 Certification","https:\u002F\u002Fwww.qscert.com\u002Fcs\u002Fissued-certificates\u002F?certID=_7690LD367","\u002Fimages\u002Fabout-us\u002Fcertifications\u002Fiso-27001.svg",{"alt":60,"href":61,"image":62},"ISO 9001 Certification","https:\u002F\u002Fwww.qscert.com\u002Fcs\u002Fissued-certificates\u002F?certID=_7690LBDB0","\u002Fimages\u002Fabout-us\u002Fcertifications\u002Fiso-9001.svg",{"alt":64,"href":65,"image":66},"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":68,"default_og_image_alt":72,"og_site_name":72,"og_locale":73,"twitter_site":74,"page_type_defaults":75},[69],{"style":70,"url":71},"og","\u002Fimages\u002Fsocial_share_preview.jpg","Wolfpack Digital","en_US","@DigitalWolfpack",{},["Reactive",77],{"title":78,"body":79,"slug":80,"featured_image_urls":81,"meta_tags":106,"reading_time":116,"title_size":117,"tag_list":118,"formatted_published_at":119,"short_description":120,"categories":121,"alt_text":114,"published_at":123,"content_updated_at":124,"formatted_content_updated_at":125,"key_takeaways":126,"faqs":132,"updated_at":145,"canonical_override":44,"no_index":146,"canonical_url":147,"publishers":148},"Understanding Nuxt 3 - Part II","\u003Cp>In the first part of this series, we covered the major differences between the Composition API and the Options API and how the Reactivity API works in Nuxt 3. Now it's time to talk about state management. This concept builds on the features we discussed before. So if you haven't read the \u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Ca href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fblogposts\u002Funderstanding-nuxt-3-part-i\" rel=\"noopener noreferrer\" target=\"_blank\">first part\u003C\u002Fa>\u003C\u002Fstrong> yet, now's the time.\u003C\u002Fp>\u003Cp>A quick note on versions. Nuxt 4 is now the current stable release, and Nuxt 3 has entered maintenance mode. The state management patterns below still apply, because Nuxt 4 builds on the same foundations. For the latest details, always check the \u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Ca href=\"https:\u002F\u002Fnuxt.com\u002Fdocs\" rel=\"noopener noreferrer\" target=\"_blank\">official Nuxt documentation\u003C\u002Fa>\u003C\u002Fstrong>.\u003C\u002Fp>\u003Ch2>State management in Nuxt 3\u003C\u002Fh2>\u003Cp>The variables we declare in a component are only available in that component's scope. But real apps often need to share variables across components, functions, or pages. Since we already covered composables and reactive data, I'll show three ways to handle state management in a Nuxt 3 app. First, let's see how the Reactivity API can do it.\u003C\u002Fp>\u003Ch2>A. Ref() and Reactive()\u003C\u002Fh2>\u003Cp>\u003Cimg src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F731\u002Fcontent_0b3f0e28-70b6-4f53-adcd-483b8e9f8350.png\" alt=\"Code screenshot of a store.js file importing reactive from vue and exporting a reactive store object with a count property\">\u003C\u002Fp>\u003Cp>\u003Cimg src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F732\u002Fcontent_4075c659-add8-484f-8318-27f166ab76f1.png\" alt=\"Code screenshot of ComponentA.vue importing the shared store and rendering store.count in its template\">\u003C\u002Fp>\u003Cp>Now whenever the \u003Cem>store\u003C\u002Fem> object is mutated, any component that imports it updates its views automatically. So we have a single source of truth.\u003C\u002Fp>\u003Cp>This also means any component that imports the \u003Cem>store\u003C\u002Fem> can mutate it freely. To stop the global state from being changed at random, it's best to define methods on the store with names that express the intent of each action.\u003C\u002Fp>\u003Cp>\u003Cimg src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F733\u002Fcontent_b00842e7-b2cc-4ecb-9536-18a54444c97a.png\" alt=\"Code screenshot of a reactive store with a named method that increments the count property using this.count\">\u003C\u002Fp>\u003Cp>The \u003Cem>ref()\u003C\u002Fem> and \u003Cem>reactive()\u003C\u002Fem> functions can manage state in client-side apps. But if you build a web application that uses \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\">server-side rendering (SSR)\u003C\u002Fa>\u003C\u002Fstrong>, this pattern brings challenges, including state hydration.\u003C\u002Fp>\u003Cp>With server-side rendering in Nuxt, the app \u003Cstrong>first runs on the server\u003C\u002Fstrong> to generate the initial HTML. There's a good chance one or more refs are used during that setup. Once the app boots on the client, though, \u003Cstrong>none of those variables are set\u003C\u002Fstrong>. So we have to run the setup code again to work out their values.\u003C\u002Fp>\u003Cp>This is where hydration comes in. We take the state we already computed on the server and send it with the app's HTML, CSS, and other assets. Then, instead of recalculating everything, we pick up where we left off.\u003C\u002Fp>\u003Cp>Sadly, \u003Cem>ref\u003C\u002Fem> and \u003Cem>reactive\u003C\u002Fem> can't do this for us. Usually that's fine. It only becomes an issue when your \u003Cem>ref\u003C\u002Fem> relies on server state, such as a request header or data fetched during server rendering.\u003C\u002Fp>\u003Ch2>B. The useState composable\u003C\u002Fh2>\u003Cp>That's why Nuxt provides the \u003Cem>useState\u003C\u002Fem> composable. It creates a reactive, SSR-friendly shared state across components. When Nuxt renders a page, it stores all the state used by \u003Cem>useState\u003C\u002Fem> and sends it to the client. When the client boots, it hydrates that state back in, restarting every piece of state that used \u003Cem>useState\u003C\u002Fem>.\u003C\u002Fp>\u003Cp>The \u003Cem>useState\u003C\u002Fem> composable isn't a full state management library. It lets you share state with a simple key-based system. That helps you avoid prop drilling and heavy use of events.\u003C\u002Fp>\u003Cp>\u003Cimg src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F734\u002Fcontent_e23e03ab-c24d-4092-93da-11e8f21056fb.png\" alt=\"Code screenshot using the useState composable with a user key to store an object with id, name and profile fields\">\u003C\u002Fp>\u003Cp>As apps grow larger and more complex, so does the state. A flat state with basic keys stops making sense. That's why Pinia, the \u003Cstrong>official\u003C\u002Fstrong> Vue state management library, is a must-learn, just like its older sibling Vuex.\u003C\u002Fp>\u003Ch2>C. Pinia\u003C\u002Fh2>\u003Cp>Pinia offers a better developer experience than Nuxt's \u003Cem>useState\u003C\u002Fem>. It adds features you'll likely need as your app grows. A stubborn developer could build the same things without it. But there's no need to reinvent the wheel when the Vue team already did. Here are the features Pinia brings:\u003C\u002Fp>\u003Col>\n\u003Cul>\u003Cli>Stores to organise your state.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>Integration with Vue DevTools, including in-component inspection and time-travel debugging.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>Modifying stores without reloading your page.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>Actions and getters for easier updating and reading of state.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>No explicit mutations, since all changes are implicit.\u003C\u002Fli>\u003C\u002Ful>\n\u003C\u002Fol>\u003Cp>Let's look at how to define a store with Pinia in Nuxt 3.\u003C\u002Fp>\u003Cp>\u003Cimg src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F735\u002Fcontent_0a97d167-8794-4227-a1ce-a715a9898580.png\" alt=\"Code screenshot of a Pinia setup store using defineStore with a filtersList state, a getter, and an addValueToFilterList action\">\u003C\u002Fp>\u003Cp>First, define the store with Pinia's \u003Cem>defineStore\u003C\u002Fem> function. It takes two arguments. The first is the store name, which Pinia uses to connect to the DevTools. The second is either a setup function (example above) or an Options API object (below).\u003C\u002Fp>\u003Cp>\u003Cimg src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F736\u002Fcontent_23e95baa-7895-420b-8780-e0f73176c589.png\" alt=\"Code screenshot of a Pinia options store using defineStore with state, getters and actions for a filter store\">\u003C\u002Fp>\u003Cp>Think of \u003Cem>state\u003C\u002Fem> as the store's \u003Cem>data\u003C\u002Fem>, \u003Cem>getters\u003C\u002Fem> as its \u003Cem>computed\u003C\u002Fem> properties, and \u003Cem>actions\u003C\u002Fem> as its \u003Cem>methods\u003C\u002Fem>. Option stores are more intuitive. They give you a skeleton that's easier to work with.\u003C\u002Fp>\u003Cp>The setup function version is less verbose and more concise. In it:\u003C\u002Fp>\u003Col>\n\u003Cul>\u003Cli>\n\u003Cem>ref()\u003C\u002Fem>s become \u003Cem>state\u003C\u002Fem> properties.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>\n\u003Cem>computed()\u003C\u002Fem> functions become \u003Cem>getters\u003C\u002Fem>.\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>\n\u003Cem>function()\u003C\u002Fem>s become \u003Cem>actions\u003C\u002Fem>.\u003C\u002Fli>\u003C\u002Ful>\n\u003C\u002Fol>\u003Cp>Now that you know all three ways to handle state management in Nuxt 3, the common question is which one to choose.\u003C\u002Fp>\u003Cp>\u003Cimg src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F737\u002Fcontent_8ad0424a-1f45-42de-8ba3-d9afa60a6d25.png\" alt=\"Diagram showing an app complexity spectrum moving from ref to useState to Pinia, with the Pinia pineapple mascot\">\u003C\u002Fp>\u003Cp class=\"ql-align-center\">\u003Cem>Source: \u003C\u002Fem>\u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Cem>\u003Ca href=\"https:\u002F\u002Fwww.vuemastery.com\u002Fblog\u002Fnuxt-3-state-mangement-pinia-vs-usestate\u002F\" rel=\"noopener noreferrer\" target=\"_blank\">Nuxt 3 State Management: Pinia vs useState\u003C\u002Fa>\u003C\u002Fem>\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>It comes down to app complexity. \u003Cem>Ref()\u003C\u002Fem> and \u003Cem>useState\u003C\u002Fem> are enough for a simple site or a landing page. Pinia is the go-to for a web app where users log in and do more complex operations.\u003C\u002Fp>\u003Ch2>Hands-on: build a Nuxt 3 app\u003C\u002Fh2>\u003Cp>In this article, I wanted to cover the \u003Cstrong>very basics\u003C\u002Fstrong> of what Nuxt 3 brings. Keep in mind it has many more features. I strongly recommend starting with the official \u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Ca href=\"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fintroduction.html\" rel=\"noopener noreferrer\" target=\"_blank\">Vue\u003C\u002Fa>\u003C\u002Fstrong> and \u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Ca href=\"https:\u002F\u002Fnuxt.com\u002Fdocs\" rel=\"noopener noreferrer\" target=\"_blank\">Nuxt\u003C\u002Fa>\u003C\u002Fstrong> docs before you write code. But if you're impatient and like to dig into code first, like me, here are the steps to a fresh Nuxt 3 app with Pinia. Run \u003Cem>npx nuxi init nuxt-3-demo\u003C\u002Fem> to set up a new project with no dependencies installed. Then move into the project with \u003Cem>cd nuxt-3-demo\u003C\u002Fem> and install the dependencies with \u003Cem>yarn install\u003C\u002Fem>. Now start the dev server with \u003Cem>yarn dev\u003C\u002Fem>.\u003C\u002Fp>\u003Cp>If you know Nuxt 2, you'll notice the Nuxt 3 project structure is simpler. You add the folders you need, rather than having everything and enabling it with a file.\u003C\u002Fp>\u003Cp>This means Nuxt 3 is much smaller and skips the router by default. There's also no pages folder by default. When you add a pages folder and put a file inside, Nuxt builds the router for you. If you only have one page, such as a landing page, you may not need the pages folder. So this is the directory structure you'll see after running the commands above.\u003C\u002Fp>\u003Cp>\u003Cimg src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F738\u002Fcontent_57f94afc-911b-46ed-9a36-31cbda60d2b4.png\" alt=\"VS Code screenshot of a fresh nuxt-3-demo project with app.vue open showing a template and the NuxtWelcome starter component\">\u003C\u002Fp>\u003Cp>The \u003Cem>app.vue\u003C\u002Fem> file is the entry point of the app and acts as the index page.\u003C\u002Fp>\u003Cp>Before adding pages, we adapt \u003Cem>app.vue\u003C\u002Fem> by replacing the \u003Cem><NuxtWelcome \u002F>\u003C\u002Fem> starter component with \u003Cem><NuxtPage>\u003C\u002Fem>. This built-in component ships with Nuxt and is needed to display top-level or nested pages from the \u003Cem>pages\u002F\u003C\u002Fem> directory.\u003C\u002Fp>\u003Cp>Then run \u003Cem>npx nuxi add page about\u003C\u002Fem>. Watch how Nuxi, the new Nuxt CLI, creates the pages folder with an \u003Cem>about.vue\u003C\u002Fem> file and boilerplate code. Easy as one, two, three.\u003C\u002Fp>\u003Cp>Now visit http:\u002F\u002Flocalhost:3000\u002Fabout and you'll see it. Try the index page at http:\u002F\u002Flocalhost:3000\u002F, though, and you'll get a 404 error. That's because you don't have an \u003Cem>index.vue\u003C\u002Fem> file in your pages folder yet. So run \u003Cem>npx nuxi add page index\u003C\u002Fem> to add it.\u003C\u002Fp>\u003Cp>Next, add Pinia to your project with \u003Cem>yarn add @pinia\u002Fnuxt\u003C\u002Fem>. The only change you need is to add '@pinia\u002Fnuxt' to your modules list in the \u003Cem>nuxt.config.ts\u003C\u002Fem> file. And you're good to go.\u003C\u002Fp>\u003Ch2>Conclusion\u003C\u002Fh2>\u003Cp>Now that we've gone through both parts and set up a Nuxt 3 app from scratch, the fundamentals are set. What's next is to get creative and play with the \u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Ca href=\"https:\u002F\u002Fnuxt.com\u002Fmodules\" rel=\"noopener noreferrer\" target=\"_blank\">Nuxt modules\u003C\u002Fa>\u003C\u002Fstrong> of your choice. That's how you add more complex features to the demo site.\u003C\u002Fp>\u003Cp>If you need to migrate a complex Nuxt 2 app to Nuxt 3, I recommend reading this great \u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Ca href=\"https:\u002F\u002Fharlanzw.com\u002Fblog\u002Fnuxt-3-migration-cheatsheet\" rel=\"noopener noreferrer\" target=\"_blank\">migration guide\u003C\u002Fa>\u003C\u002Fstrong> first.\u003C\u002Fp>\u003Cp>In the end, I find Nuxt 3 and Vue 3 exciting to learn, despite the big changes. What's even better is that the Vue core team encourages the Composition API but doesn't force it. You're free to stick with the Options API if that feels more comfortable. Later, once you have a good grip and built your first \u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Ca href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fblogposts\u002Fdifferences-between-static-websites-spa-and-ssr\" rel=\"noopener noreferrer\" target=\"_blank\">website\u003C\u002Fa>\u003C\u002Fstrong>, you can challenge yourself to refactor it with the Composition API.\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. Thank you for reading.\u003C\u002Fp>","undestanding-nuxt-3-part-ii",[82,85,88,91,94,97,100,103],{"style":83,"url":84},"640","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F261\u002Ffeatured_image\u002F640\u002FPART%202_Nuxt%203.webp",{"style":86,"url":87},"768","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F261\u002Ffeatured_image\u002F768\u002FPART%202_Nuxt%203.webp",{"style":89,"url":90},"1024","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F261\u002Ffeatured_image\u002F1024\u002FPART%202_Nuxt%203.webp",{"style":92,"url":93},"1366","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F261\u002Ffeatured_image\u002F1366\u002FPART%202_Nuxt%203.webp",{"style":95,"url":96},"1600","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F261\u002Ffeatured_image\u002F1600\u002FPART%202_Nuxt%203.webp",{"style":98,"url":99},"1920","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F261\u002Ffeatured_image\u002F1920\u002FPART%202_Nuxt%203.webp",{"style":101,"url":102},"thumb","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F261\u002Ffeatured_image\u002Fthumb\u002FPART%202_Nuxt%203.webp",{"style":104,"url":105},"original","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F261\u002Ffeatured_image\u002Foriginal\u002FPART%202_Nuxt%203.webp",{"title":107,"description":108,"keywords":109,"contact_form:title":110,"contact_form:cta":111,"og:site_name":72,"og:type":112,"og:locale":73,"twitter:card":113,"twitter:site":74,"twitter:creator":74,"og:title":107,"og:image:alt":114,"twitter:title":107,"og:description":115,"twitter:description":115},"Nuxt 3 State Management Guide | Wolfpack Digital","Nuxt 3 state management explained: use ref and reactive, the useState composable, and Pinia. Learn which to pick and build a Nuxt 3 app with Pinia.","nuxt state management, pinia, nuxt 3 pinia, vue state management, usestate nuxt, wolfpack digital","contact us","send message","article","summary_large_image","Illustration of a developer holding a green card with the Vue and Nuxt code chevron logo, on a yellow background","Nuxt 3 state management explained: ref and reactive, the useState composable, and Pinia. Learn which to pick and build a Nuxt 3 app with Pinia.","7 min",32,[],"May 19, 2023","Nuxt 3 state management, explained. Learn three ways to share state across components: ref() and reactive(), the useState composable, and Pinia. We also build a Nuxt 3 app with Pinia from scratch.",[122],"web-development","2023-05-19T07:00:00.000Z","2026-07-02T06:49:28.322Z","Jul 2, 2026",[127,128,129,130,131],"Nuxt 3 offers three ways to manage state: ref() and reactive() from the Reactivity API, the useState composable, and the Pinia library.","A plain ref\u002Freactive store works client-side but struggles with server-side rendering because of state hydration.","The useState composable gives you SSR-friendly shared state through a simple key-based system, without prop drilling.","Pinia is the official Vue state management library, with stores, getters, actions, and Vue DevTools support for larger apps.","Choose by complexity: ref and useState suit simple sites and landing pages, while Pinia fits apps with logins and complex logic. These patterns carry over to Nuxt 4, now the current stable release.",[133,136,139,142],{"answer":134,"question":135},"Nuxt 3 gives you three main options. You can use the Reactivity API with ref() and reactive() to build a shared store, use the built-in useState composable for SSR-friendly shared state, or use Pinia, the official Vue state management library, for larger and more complex apps.","What are the ways to manage state in Nuxt 3?",{"answer":137,"question":138},"It depends on complexity. The useState composable is enough for a simple presentation site or landing page, since it shares state through a simple key-based system. Pinia is the better choice for a web app where users log in and perform more complex operations, because it adds stores, getters, actions, and DevTools support.","Should I use useState or Pinia in Nuxt 3?",{"answer":140,"question":141},"With SSR, the app first runs on the server to build the initial HTML, then reruns setup on the client where those variables are not yet set. A plain ref or reactive store cannot carry that server state across, so state that depends on request headers or server-fetched data needs hydration, which useState handles.","Why do ref and reactive struggle with server-side rendering?",{"answer":143,"question":144},"Initialise a project with the Nuxt CLI, move into the folder, and install the dependencies. Start the dev server, then add the Pinia Nuxt module and list it in your Nuxt config file. From there you can define stores with Pinia's defineStore function and start managing state.","How do I start a new Nuxt 3 app with Pinia?","2026-07-06T12:08:36.190Z",false,"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fblogposts\u002Fundestanding-nuxt-3-part-ii",[149],{"id":150,"author":151,"short_description":152,"role":153,"avatar_urls":154,"cover_urls":162,"linkedin_link":181,"instagram_link":44,"x_link":44,"meta_tags":182,"last_published_at":123,"same_as":184},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",[155,157,160],{"style":101,"url":156},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Favatar\u002Fthumb\u002Fimage%20%2821%29.webp",{"style":158,"url":159},"medium","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Favatar\u002Fmedium\u002Fimage%20%2821%29.webp",{"style":104,"url":161},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Favatar\u002Foriginal\u002Fimage%20%2821%29.webp",[163,165,167,169,171,173,175,177,179],{"style":83,"url":164},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Fcover_image\u002F640\u002FRoxi.webp",{"style":86,"url":166},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Fcover_image\u002F768\u002FRoxi.webp",{"style":89,"url":168},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Fcover_image\u002F1024\u002FRoxi.webp",{"style":92,"url":170},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Fcover_image\u002F1366\u002FRoxi.webp",{"style":95,"url":172},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Fcover_image\u002F1600\u002FRoxi.webp",{"style":98,"url":174},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Fcover_image\u002F1920\u002FRoxi.webp",{"style":101,"url":176},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Fcover_image\u002Fthumb\u002FRoxi.webp",{"style":158,"url":178},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F54\u002Fcover_image\u002Fmedium\u002FRoxi.webp",{"style":104,"url":180},"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":151,"description":153,"keywords":44,"contact_form:title":110,"contact_form:cta":111,"og:site_name":72,"og:type":183,"og:locale":73,"twitter:card":113,"twitter:site":74,"twitter:creator":74},"website",[181]]