Weekly Vue News — #65 — Share Composable State Across Components
Hi 👋
Last week I finally managed to deploy a static version of my portfolio website (developed with Nuxt 3) to Netlify.
This week I’ll work on some bugfixes for CodeSnap.dev and maybe I have time to start writing a new blog post. The next article will be about the Table of Contents component I developed for my portfolio website.
Have a great week ☀️
Vue Tip: Share Composable State Across Components
We create a new state on each function call if we define state in a Vue composable. But sometimes, we want to sync the composable state across components.
Let’s take a look at a simple example:
We define a simple reactive variable cart inside the useCart composable. Every time a component calls useCart, a new state is created.
The following Stackblitz includes a running demo. Click “Add to cart” on “Component 1” and “Component 2”, and you can see that every component has it’s own cart state:
Vue Share Composable State Across Components — StackBlitz — stackblitz.com
To keep the same state between every useCart instance, we need to lift he state up outside the function, so it's created only once:
You can test it by yourself in the Stackblitz demo above: Click “Add to shared cart” on “Component 1” and “Component 2”, and you can see that they now share the same state.
Curated Vue Content
📕 Dev SSR on Nuxt with Vite
👉🏻 Anthony Fu guides you through the inner workings of Server-Side rendering in dev mode with Nuxt 3 and how this inspired a larger ecosystem.
📕 Let’s use Vue3 Features in Your Vue2 Project
👉🏻 Chamara explain, how to upgrade your existing Vue2 project to Vue 2.7
👉🏻 He’ll also explain how to use the mentioned backported features in your project explaining a small application.
📹 How Vite Makes Nuxt Possible
👉🏻 In this talk from ViteConf 2022, Nuxt core team member Daniel Roe explains how Vite makes Nuxt 3 possible
🛠️ Start a Nuxt project
👉🏻 Open a Nuxt starter on CodeSandbox or StackBlitz to get up and running in a few seconds.
🛠️ Vuesax
👉🏻 A framework of UI components created with Vuejs to make projects easily and with a unique and pleasant style.
TypeScrip Tip: Lock Types Using Const Assertion
When we construct new literal expressions with const assertions, we can signal to the language that
- no literal types in that expression should be widened (e.g. no going from “hello” to string)
- object literals get readonly properties
- array literals become readonly tuples
Curated Web Development Content
🤣 CSS debugging: The console.log of CSS
📕 Ten Years of TypeScript
👉🏼 TypeScript’s PM reflects on how its ideas have stood the test of time and looks forward to another ten years.
📕 Fully Typed Web Apps (from Kent C. Dodds)
👉🏻 “Type safety is something that’s not only valuable, but achievable across boundaries end to end.”
📕 Schema validation in TypeScript with Zod
👉🏻 Zod is a tool that fills this TypeScript blindspot and helps with type safety during runtime.
👉🏻 It can help you build a pretty flexible Schema design and run it against a form or user input.
