Store implementation

[MichaelPrecel]

Hi @ElMassimo — I am really really loving îles! Thanks so much for such a valuable contribution to the (Vue) ecosystem. Watching eagerly as it continues to evolve.

I'd love to be able to use it in a larger e-commerce website, but was wondering whether there's any way to implement a store?

I've just noticed the new Turbo mode, which I'm very excited about, and the roadmap that comes along with it regarding "permanent" components, but note that's not an available feature as of yet.

Cheers!

[electroheadfx]

maybe with Pinea ? its recommended to use instead of vuex from Vue developpers

[ElMassimo]

Disclaimer: for a larger e-commerce website Nuxt 3 is likely a better fit.

---

Since îles is based on Vue 3 and encourages you to use script setup, using Pinia should feel very natural.

There's two different use cases for stores in îles:

Using it only during generation

• You can use enhanceApp to add Vuex or Pinia to the app
• Then, pass any data you need inside islands explicitly using props or slots.

Sharing a store between islands

• This is probably what you are asking about
• Since each island is a separate app (if you are using Vue, a separate Vue app), rather than installing Pinia on each one, you would directly import a Pinia store or reactive object containing all data that should be shared across islands
• That might work well if the initial state is the same for all generated pages, but it can be trickier in other cases

Because iles supports different frameworks, I still haven't decided on whether to provide out-of-the-box support, but I might provide an @islands/pinia module that makes it easy to use Pinia stores across islands and takes care of the setup and setting the initial state.