Javascript is required
Weekly Vue News Logo Weekly Vue News
a { color: #616161; text-decoration: underline; text-decoration-color: #3fb983; text-decoration-thickness: 2px; text-underline-offset: 3px; } .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #78 - Use Setup Stores in Pinia for More Flexibility #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, Weekly Vue News #78

Use Setup Stores in Pinia for More Flexibility

Hi ๐Ÿ‘‹

Don't panic. This is still the same newsletter, I'm still me. I just updated the design to make it sleeker and easier to read!

I now use mjml in combination with Nuxt Content which works like a charm.

Maybe you still have some styling problems with the code blocks but everything else should now look quite good on all email clients. If you still encounter any issues, please send me an email.

Thanks to 700+ subscribers and welcome to all the new subscribers. Only about 300 left until we reach the big milestone of 1000 subscribers ๐Ÿ˜ฎ

I enjoyed last week's Vue.js Nation Conference, I hope you also enjoyed it and watched my lightning talk.

For me, these were the most important announcements:

Have a nice week โ˜€๏ธ

Pinia Tip: Use Setup Stores for More Flexibility๐Ÿ“บ Watch on YouTube

Besides Option Stores you can also use Setup Stores to define stores in Pinia. They bring more flexibility as you can create watchers within a store and freely use any composable.

Defining Setup Store

Just like the setup function in the Vue Composition API, a function that sets up reactive properties and methods can be passed, which will return an object containing the properties and methods that should be made available:

export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
return { count, doubleCount, increment }

In Setup Stores:

  • ref()s become state properties
  • computed()s become getters
  • function()s become actions

When it comes to Vue's Composition API and Options API, select the one that you are most familiar with. If you are uncertain, start with the Option Stores.

Using Setup Store

At this point, we only defined the store but it won't be created until use...Store() is called inside of setup():

<script setup>
const store = useCounterStore()
<span>Counter: {{ store.count }}</span>
<span>Double Count: {{ store.doubleCount }}</span>
<button @click="store.increment">Increment</button>

The store object has been wrapped with reactive, so there is no need to include .value when using getters, but similar to props in setup, it cannot be destructured. You need to use storeToRefs() to destructure while keeping reactivity.

Bonus Tip

You can use composables that return writable state like VueUse useLocalStorage() directly within the state() function:

export const useCounterStore = defineStore('counter', () => {
const counterInfo = useLocalStorage('counterInfo', null)
return { counterInfo }

The same example using Option Store:

export const useCounterStore = defineStore('counter', () => {
state: () => ({
// ...
counterInfo: useLocalStorage('counterInfo', null),
Curated Vue Content๐Ÿ“• Six Vue.js Events you Should Know About in 2023

๐Ÿ‘‰๐Ÿป Check out Vue School's list of must-attend Vue.js events for 2023.
๐Ÿ“• 10 Mistakes to Avoid When Starting with Vue 3
๐Ÿ‘‰๐Ÿป Using the Reactive Helper for Declaring Primitives
๐Ÿ‘‰๐Ÿป Destructing a Reactive value
๐Ÿ‘‰๐Ÿป Getting Confused with .value
๐Ÿ‘‰๐Ÿป and more...
๐Ÿ“• Skeleton Loader using Vue & Tailwind
๐Ÿ‘‰๐Ÿป A skeleton loader is a great way to improve our app's user experience.
๐Ÿ‘‰๐Ÿป Giannis shows us how we can create a skeleton loader component that includes an animated "shimmer" effect.
Quote of the weekCurated Web Development Content๐Ÿ“น Learn Tailwind CSS
๐Ÿ‘‰๐Ÿป This beginner's course will teach you how to harness Tailwind's power.
๐Ÿ‘‰๐Ÿป Tailwind CSS has quickly become one of the most popular Responsive Design frameworks for coding new projects.
๐Ÿ“• TypeScript performance lessons

๐Ÿ‘‰๐Ÿป Sachin Raja (a tRPC maintainer) wrote about some TypeScript performance lessons the tRPC team encountered while refactoring for their v10 release.
๐Ÿ“• Why the number input is the worst input
๐Ÿ‘‰๐Ÿป Think that web form has got your number?
๐Ÿ‘‰๐Ÿป If you used input type=โ€œnumberโ€, you may be surprised to find that it doesn't.
๐Ÿ“• What if writing tests was a joyful experience?

๐Ÿ‘‰๐Ÿป "I hope this post encourages more people to try the โ€œsnapshotโ€ style of testing."
๐Ÿ› ๏ธ ni

๐Ÿ‘‰๐Ÿป Smartly use the right package manager by analyzing your lockfiles.
๐Ÿ› ๏ธ PSOne.css

๐Ÿ‘‰๐Ÿป Playstation 1 style CSS Framework, inspired by NES.css
Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
ยฉ 2023 All rights reserved.