Mastering Pinia

📢 It’s coming! Certificates.Dev’s Vue.js Free Weekend is Aug 23–24!
🆓 FREE 48h Official Vue.js Mid-Level Cert Training: Pinia challenges, trial exam & more.

Let’s upgrade your skills: https://certificates.dev/vuejs/free-weekend

Are you using Pinia Colada’s useQuery or useMutation in your projects?
How do they compare to TanStack Query? 🤔

💡 Tip: Simplify Pinia Store Creation

Here’s a quick counter store example:
Use it in your Vue component with `const counter = useCounterStore()`

What’s your favorite Pinia Colada feature for simplifying data fetching in Vue?
Let’s hear your use cases! 👩‍💻

What would you do if someone opened an issue or discussion like this in your OSS repo? 😅

😅😅

Unit Testing Stores: What do you know about it?

Check out this lesson where we will cover everything there is to know about unit testing stores with Pinia. 🍍

https://masteringpinia.com/lessons/unit-testing-stores

How do you organize your Pinia stores in large Vue 3 apps to keep them maintainable?
Share your folder structure! 🪜

🔥 Today we have a special announcement for you: Certificates.Dev’s Vue.js Free Weekend is Aug 23–24!

Get 48h FREE Official Vue.js Mid-Level Cert Training with Pinia focus, code challenges & trial exam.

Are you ready? Sign up now: https://certificates.dev/vuejs/free-weekend

💡Tip of the day: Pinia integrates with Vue Devtools for inspecting and debugging your stores.

Vue Devtools provides a dedicated tab for viewing and manipulating Pinia store state, making it easier to debug your application's state management.

🤔A community member asked us: "How does the “n ref” keep its value once it is destroyed?”

🤓 Here’s our answer:
The “n: ref“ syntax is used to create a reference that persists across component re-renders, the value stays untouched, just the reactivity stops working.

Create a basic Vue 3 `effectScope` 👩‍💻

Vue offers effectScope as a container for reactive effects. You can create one using effectScope() and run effects within it using scope.run().

Interested in learning how to test stores and components that consume stores? 🏬

We’ve got your back, check this out:
https://masteringpinia.com/lessons/introduction-to-testing-stores

Stop an `effectScope` to clean up effects ⛏️

To prevent memory leaks, you can stop an effectScope using scope.stop(). This will clean up all effects within the scope.

Nest effectScopes for hierarchical management 🔍

You can create nested `effectScopes` to organize your effects. This helps in managing complex reactive logic.

By detaching the effectScope, the store's state and functions become accessible globally, independent of component lifecycles.

💡Tip of the day: Detach `effectScope` for Global Store Management

To create a global store that transcends component lifecycles, use effectScope(true) to detach the scope. Beware this needs extra handling for SSR Apps ⚠️⬇️

A community member asked us: "How can I create separate Pinia store instances for multiple embedded Vue apps on a single CMS page?"

Here's our answer: Each app does app.use(createPinia()). 😊

Singleton Store: One Store to Rule Them All 📈

Ever accidentally create multiple copies of your store, leading to chaos? A WeakMap in defineStore guarantees there's only one instance per function. This keeps your state management predictable and efficient.

Separation of Concerns: Store Logic, Meet Usage! 💫

Think of your store as a well-organized kitchen. The ingredients (logic) are prepped separately, making it easier to assemble delicious components (store usage). This separation promotes reusability, testability & cleaner code.

Mastering Pinia | Learn from the creator of Pinia The ultimate course for mastering the officially recommended State Management solution for Vue.js. Created by Eduardo San Martin Morote, the author of Pinia.

Confused about Setup vs. Option Stores in Pinia?

Our Pinia lesson clears it up! Discover a more flexible syntax for writing #Pinia stores, unlocking greater functionality for your Vue apps.

➡ https://masteringpinia.com/lessons/what-are-setup-stores-and-how-do-they-compare-to-option-stores

Use Reactive Refs for Dynamic State 🚀

Create reactive state properties using ref to ensure components automatically update when changes occur, maintaining a dynamic and responsive user interface.

GitHub - nuxt-modules/supabase: Supabase module for Nuxt. Supabase module for Nuxt. Contribute to nuxt-modules/supabase development by creating an account on GitHub.

@nuxt.com x @supabase.com module is now compatible with Nuxt 4 ☑

👉 github.com/nuxt-modules...

vue-router build powered by tsdown + rolldown ✨

Certificates.dev Free Weekend | Free access to Vue.js Developer Certification Training Unlock 48 hours of free access to the Certified Vue.js Developer Training on August 23 - 24 2025. Dive into theory, coding challenges, quizzes, and a trial exam.

Vue.js Free Weekend - Aug 23 & 24

48hrs of FREE access to @vuejs.org cert training, designed to prep you for the official exam reviewed by @evanyou.me

💻 Code challenges
🧠 10 MCQs + 1 code task (trial exam)
📚 Covers Composition API, Pinia,Vue Router & more

Sign up👇
certificates.dev/vuejs/free-w...

Controlled Updates with Actions: Keep Your State Organized 🚀

Actions are like measured cooking instructions for modifying your store's state. They provide a controlled and predictable way to update the state, ensuring consistency and easier testing.

🔥Tip of the day:
Getters let you create computed properties based on your store's state. They're cached and only recomputed when the underlying state changes, improving performance.

Confused about useStore()? 🍍

We have a FREE lesson that explains the composable function returned by defineStore(), detailing where it can be called and how to use the store outside of components.

Watch now it here: https://masteringpinia.com/lessons/how-does-usestore-work

Mastering Pinia | Learn from the creator of Pinia The ultimate course for mastering the officially recommended State Management solution for Vue.js. Created by Eduardo San Martin Morote, the author of Pinia.

Struggling with state management in your Vue.js apps? 🍍

The "Quick Start with Pinia" lesson on Pinia breaks down this powerful library, showing you how to efficiently manage data across components.

Best part? It's free! Check it out:
https://masteringpinia.com/lessons/quick-start-with-pinia

🔥Tip of the day:
The $subscribe method lets you register a callback that will be executed whenever the store's state changes. This is useful for persisting data, logging changes, or triggering other side effects.