Recommend to mention @vue/reactivity as minimal package to manage state in SSR projects.

[M-Shrief]

Ht, I want to recommend @vue/reactivity package as another way to manage state with Astro:

• It's size is 14.4 Kb (nanostores is 5.4 KB)
• It's tree-shakeable
• maintained by Vuejs' core Team.

package's links:

• github
• npm

It has very neat & simple interface:

• ref(): Refs can hold any value type, including deeply nested objects, arrays, or JavaScript built-in data structures like Map. A ref will make its value deeply reactive. This means you can expect changes to be detected even when you mutate nested objects or arrays.
• shallowRef(): the inner value of a shallow ref is stored and exposed as-is, and will not be made deeply reactive. Only the .value access is reactive. shallowRef() is typically used for performance optimizations of large data structures, or integration with external state management systems.
• reactive(): Unlike a ref which wraps the inner value in a special object, reactive() makes an object itself reactive, it's a proxy of the original object, and mutating the original object will no trigger an update
• shallowReactive(): Unlike reactive(), there is no deep conversion: only root-level properties are reactive for a shallow reactive object. Property values are stored and exposed as-is.
• computed() for complex logic that includes reactive data, computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed.
• and more like readonly()

To install:

npm i @vue/reactivity

Examples:

// TypeScript file, typically in src/stores/
import {ref, computed} from '@vue/reactivity';

// Declaring a reactive variable
const poets = ref<Poet[]>([]);
// Accessing its value
console.log(poets.value)
// Mutating its value
poets.value = [...newPoets];

// using computed to as a getter or to get a modification of the reactive variable
export const getPoets = computed<Poet[]>(() => { return poets.value });

const counter = ref(2);
const getDoubleCounter = computed(() => { return counter.value * 2 }); 

// for actions, just use sync/async functions
export const fetchPoets = async () => {
    try {
        const req = await baseHttp.get(`/poets`);
        poets.value = req.data;
    } catch (error) {
        alert(error);
    }
}; 

Then in .astro file:

---
// Layout
import Layout from "../layouts/Layout.astro";
// Components
import ShowCasePoets from "../components/ShowCasePoets.vue";
// Stores
import {getPoets, fetchPoets} from '../stores/poets.composition'

// fetching poets on build
await fetchPoets()
---
<Layout >
	<main >
           <!-- then we can pass the value to components -->
	   <ShowCasePoets poets={getPoets.value} />
	</main>
</Layout>

I'm currently migrating my Vuejs SPA to Astro, check repo, I'm using @vue/reactivity & nanostores, I can use them exchangeably with ease. I made two examples of the same store (src/stores/poets.composition.ts with @vue/reactivity, src/stores/poets.nano.ts for nanostores)

Some perceivable benefits of applying this recommendation:

• Showing Astro's versatility to use already made packages in the ecosystem.
• Inspiring other developers from other ecosystems to integrate their ecosystem with astro, and showing that they can go as minimal with packages like @vue/reactivity or go big with state management libraries like Pinia, and all of that is done easily with Astro.
• Hopefully, it'll help to Increase Astro's share in the SSR market.

PS: that's my first discussion, and I'm a junior, so I hope I've done it well, and as always take my words with a grain of salt.

[delucis]

Thanks for the detailed post @M-Shrief! I think this sounds like a great thing you could write a blog post about to start with describing your experience and how you used this package. We chose to document Nanostores because it works across frameworks and we can’t necessarily have detailed docs for every framework ecosystem in Astro’s docs, but we’re always happy to link to community resources like blog posts.

[M-Shrief]

Thanks for your replay, I'll make a post about it, but I need to clarify that I mentioned this package as it can be used with any framework not only Vuejs, like I use them in Astro files easily with out a problem.
It can be a fallback for nanostores, or as another option for people who doesn't like nanostores' interface.
Still though I think referencing good blog posts will be sufficient, and it'll do the job.

[ArmandPhilippot]

We're closing stale and outdated discussion to keep only the discussions still relevant to the current project version and/or the current docs state.

It seems to be resolved, so I'm closing this.

If you think this is a mistake and that this discussion should remain open, please feel free to ping me, I'll take a second look at it.

Thank your for your contribution!