Tessera

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.

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? 😅

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.

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

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.

Are you going to build anything this weekend with Pinia or Pinia colada? 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.

Eduardo.𝚟𝚞𝚎 @esm.dev · 12mo ago

How do you combine Pinia stores with Pinia Colada for complex async state management? Share your patterns! 👇

You have asked me this a lot, so here it is! Announcing the Pinia Store 🎉 pinia.store

Pinia Store

Official Pinia shop for merch.

pinia.store

Have you tried Pinia Colada’s infinite scrolling API? 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? 😏

💡Tip of the day: Fetch data effortlessly with Pinia Colada’s `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? 💡

📢 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()`

Eduardo.𝚟𝚞𝚎 @esm.dev · 12mo ago

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