Using nanostores in Astro + Vue setup

Written by Nabil It's 2025 and Astro is a growing framework. In this quick post, I'd like to share a little bit about my little workaround when I was building my personal website for the first time. Astro has a static-first architecture and I was going to use it without its on-demand SSR feature. So just for a note, this means I couldn't use Astro session that could've been handy for operating states handled by server. Meanwhile, I also used Vue.js alongside Astro with its integration portability (sorry if it looks like I am doing an experiment here, yes I'm still learning). Everything went well until I encountered something in a Vue component that needs the Astro's context object. Say that you need Astro.url. This URL-object property can only be accessed in Astro's render context object: --- const url = Astro.url; --- Current URL BUT, when you want to access the url object inside the hydrated Vue component, ThePage.astro --- // How is this URL passed? const url = Astro.url; import NeedTheUrlComponent from './NeedTheUrlComponent.vue'; --- NeedTheUrlComponent.vue Current URL you can at least have either of these options: Make a Vue Props for it and pass it; or use a shared state manager like nanostores Experimentally, for educational purposes, I chose the later. (might be adding complexity) So below how I set it up: 1. Install nanostores

May 4, 2025 - 14:58

Written by Nabil

It's 2025 and Astro is a growing framework. In this quick post, I'd like to share a little bit about my little workaround when I was building my personal website for the first time.

Astro has a static-first architecture and I was going to use it without its on-demand SSR feature. So just for a note, this means I couldn't use Astro session that could've been handy for operating states handled by server. Meanwhile, I also used Vue.js alongside Astro with its integration portability (sorry if it looks like I am doing an experiment here, yes I'm still learning).

Everything went well until I encountered something in a Vue component that needs the Astro's context object. Say that you need Astro.url. This URL-object property can only be accessed in Astro's render context object:

---
const url = Astro.url;
---

 href={url}>
   Current URL

BUT, when you want to access the url object inside the hydrated Vue component,

`ThePage.astro`

---
// How is this URL passed?
const url = Astro.url;
import NeedTheUrlComponent from './NeedTheUrlComponent.vue';
---
 />

`NeedTheUrlComponent.vue`


<template>
    :href="url">
      Current URL
   
template>

you can at least have either of these options:

Make a Vue Props for it and pass it; or
use a shared state manager like nanostores

Experimentally, for educational purposes, I chose the later. (might be adding complexity)

So below how I set it up: