Mastering Pinia
@masteringpinia.com
🍍Transform your Vue.js state management skills with Mastering Pinia
📚 Developed by the author of Pinia
🚀 From BitterBrains, powered by @vueschool.io
📚 Developed by the author of Pinia
🚀 From BitterBrains, powered by @vueschool.io
Interesting Fact: Pinia Colada’s Infinite Scrolling 🍍💻
It simplifies pagination with a declarative approach, supporting both page-based and cursor-based navigation. A game-changer for Vue apps! Try it out and share feedback.
It simplifies pagination with a declarative approach, supporting both page-based and cursor-based navigation. A game-changer for Vue apps! Try it out and share feedback.
September 9, 2025 at 3:28 PM
Interesting Fact: Pinia Colada’s Infinite Scrolling 🍍💻
It simplifies pagination with a declarative approach, supporting both page-based and cursor-based navigation. A game-changer for Vue apps! Try it out and share feedback.
It simplifies pagination with a declarative approach, supporting both page-based and cursor-based navigation. A game-changer for Vue apps! Try it out and share feedback.
What’s your go-to strategy for debugging Pinia stores with Vue DevTools? Any pro tips? 🍍
September 8, 2025 at 9:17 AM
What’s your go-to strategy for debugging Pinia stores with Vue DevTools? Any pro tips? 🍍
What new Pinia or Pinia Colada features are you hoping Posva will announce next? 😅
September 5, 2025 at 2:26 PM
What new Pinia or Pinia Colada features are you hoping Posva will announce next? 😅
Are you leveraging Pinia’s TypeScript support for type-safe stores? How’s it working for you? 🤔
September 4, 2025 at 9:17 AM
Are you leveraging Pinia’s TypeScript support for type-safe stores? How’s it working for you? 🤔
A community member asked us:
How is the “v-for="[tabId, title]” Syntax used in tabList?
Our answer👇
This syntax is versatile, & you can use it directly in your code. Plus, you can also utilize "v-for="{ id, other } in" or replace "in" with "of" – all achieving the same result.
How is the “v-for="[tabId, title]” Syntax used in tabList?
Our answer👇
This syntax is versatile, & you can use it directly in your code. Plus, you can also utilize "v-for="{ id, other } in" or replace "in" with "of" – all achieving the same result.
September 3, 2025 at 3:28 PM
A community member asked us:
How is the “v-for="[tabId, title]” Syntax used in tabList?
Our answer👇
This syntax is versatile, & you can use it directly in your code. Plus, you can also utilize "v-for="{ id, other } in" or replace "in" with "of" – all achieving the same result.
How is the “v-for="[tabId, title]” Syntax used in tabList?
Our answer👇
This syntax is versatile, & you can use it directly in your code. Plus, you can also utilize "v-for="{ id, other } in" or replace "in" with "of" – all achieving the same result.
Learn how to build a Tabs Manager Solution using inject/provide for tightly-coupled Vue components. Boost your app's maintainability with this advanced dependency injection exercise.
Check it out now!
https://masteringpinia.com/lessons/creating-a-tabs-manager-solution
Check it out now!
https://masteringpinia.com/lessons/creating-a-tabs-manager-solution
September 2, 2025 at 2:25 PM
Learn how to build a Tabs Manager Solution using inject/provide for tightly-coupled Vue components. Boost your app's maintainability with this advanced dependency injection exercise.
Check it out now!
https://masteringpinia.com/lessons/creating-a-tabs-manager-solution
Check it out now!
https://masteringpinia.com/lessons/creating-a-tabs-manager-solution
Fun Fact: Why the Name Pinia?
Did you know Pinia is named after "piña" (Spanish for pineapple)? 🍍
It symbolizes individual stores joining together to form a single, delicious state management solution. A nod to Eduardo's creative naming! Try pronouncing it “peenya” for fun.
Did you know Pinia is named after "piña" (Spanish for pineapple)? 🍍
It symbolizes individual stores joining together to form a single, delicious state management solution. A nod to Eduardo's creative naming! Try pronouncing it “peenya” for fun.
September 1, 2025 at 2:23 PM
Fun Fact: Why the Name Pinia?
Did you know Pinia is named after "piña" (Spanish for pineapple)? 🍍
It symbolizes individual stores joining together to form a single, delicious state management solution. A nod to Eduardo's creative naming! Try pronouncing it “peenya” for fun.
Did you know Pinia is named after "piña" (Spanish for pineapple)? 🍍
It symbolizes individual stores joining together to form a single, delicious state management solution. A nod to Eduardo's creative naming! Try pronouncing it “peenya” for fun.
Are you going to build anything this weekend with Pinia or Pinia colada?
If yes, feel free to share a link to your project! 🤓
If yes, feel free to share a link to your project! 🤓
August 29, 2025 at 2:23 PM
Are you going to build anything this weekend with Pinia or Pinia colada?
If yes, feel free to share a link to your project! 🤓
If yes, feel free to share a link to your project! 🤓
💡Advice: Optimize Pinia for SSR
Using Pinia with Nuxt? Always install Pinia before Pinia Colada for seamless SSR support. This ensures proper hydration and caching.
Using Pinia with Nuxt? Always install Pinia before Pinia Colada for seamless SSR support. This ensures proper hydration and caching.
August 28, 2025 at 2:25 PM
💡Advice: Optimize Pinia for SSR
Using Pinia with Nuxt? Always install Pinia before Pinia Colada for seamless SSR support. This ensures proper hydration and caching.
Using Pinia with Nuxt? Always install Pinia before Pinia Colada for seamless SSR support. This ensures proper hydration and caching.
How do you combine Pinia stores with Pinia Colada for complex async state management?
Share your patterns! 👇
Share your patterns! 👇
August 27, 2025 at 3:28 PM
How do you combine Pinia stores with Pinia Colada for complex async state management?
Share your patterns! 👇
Share your patterns! 👇
Reposted by Mastering Pinia
Have you tried Pinia Colada’s infinite scrolling API?
What’s your feedback on its declarative approach? 💻
What’s your feedback on its declarative approach? 💻
August 25, 2025 at 2:23 PM
Have you tried Pinia Colada’s infinite scrolling API?
What’s your feedback on its declarative approach? 💻
What’s your feedback on its declarative approach? 💻
What’s the trickiest state management issue you’ve faced with Pinia, and how did you solve it? 😏
August 22, 2025 at 2:23 PM
What’s the trickiest state management issue you’ve faced with Pinia, and how did you solve it? 😏
💡Tip of the day: Fetch data effortlessly with Pinia Colada’s `useQuery`.
Automatic caching and deduplication included! How are you using useQuery?
Automatic caching and deduplication included! How are you using useQuery?
August 21, 2025 at 3:28 PM
💡Tip of the day: Fetch data effortlessly with Pinia Colada’s `useQuery`.
Automatic caching and deduplication included! How are you using useQuery?
Automatic caching and deduplication included! How are you using useQuery?
How do you handle server-side rendering (SSR) with Pinia Colada in Nuxt apps?
Any tips for smoother integration? 💡
Any tips for smoother integration? 💡
August 20, 2025 at 2:23 PM
How do you handle server-side rendering (SSR) with Pinia Colada in Nuxt apps?
Any tips for smoother integration? 💡
Any tips for smoother integration? 💡
📢 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
🆓 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
August 19, 2025 at 3:28 PM
📢 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
🆓 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? 🤔
How do they compare to TanStack Query? 🤔
August 18, 2025 at 3:28 PM
Are you using Pinia Colada’s useQuery or useMutation in your projects?
How do they compare to TanStack Query? 🤔
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()`
Here’s a quick counter store example:
Use it in your Vue component with `const counter = useCounterStore()`
August 15, 2025 at 2:25 PM
💡 Tip: Simplify Pinia Store Creation
Here’s a quick counter store example:
Use it in your Vue component with `const counter = useCounterStore()`
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! 👩💻
Let’s hear your use cases! 👩💻
August 14, 2025 at 2:23 PM
What’s your favorite Pinia Colada feature for simplifying data fetching in Vue?
Let’s hear your use cases! 👩💻
Let’s hear your use cases! 👩💻
Reposted by Mastering Pinia
What would you do if someone opened an issue or discussion like this in your OSS repo? 😅
August 14, 2025 at 6:52 AM
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
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
August 13, 2025 at 2:25 PM
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
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! 🪜
Share your folder structure! 🪜
August 12, 2025 at 2:23 PM
How do you organize your Pinia stores in large Vue 3 apps to keep them maintainable?
Share your folder structure! 🪜
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
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
August 11, 2025 at 3:28 PM
🔥 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
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.
Vue Devtools provides a dedicated tab for viewing and manipulating Pinia store state, making it easier to debug your application's state management.
August 8, 2025 at 2:29 PM
💡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.
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.
🤓 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.
August 7, 2025 at 3:28 PM
🤔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.
🤓 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.