Javascript is required
Weekly Vue News Logo Weekly Vue News

Document is empty, overwrite this content with #empty slot in <ContentDoc>.

Weekly Vue News - #65 - Share Composable State Across Components

Migrated Issue
Expect missing links and broken styling, as this issue has been migrated from my previous newsletter service.

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 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:

Image created with

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 Vue Share Composable State Across Components -

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:

Image created with

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.

TypeScript 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

Image created with

Curated Web Development Content

🤣 CSS debugging: The console.log of CSS

Image created with

📕 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.

Quote of the Week

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.