Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

cjholowatyj's avatar

Intializing Pinia with data from/using [Laravel/Inertia/Vue/Vite]

I'm having trouble getting over the finish line with implementing Pinia into my existing stack (Lareavel/Inertia/Vue/Vite)....

TL;DR; I want to configure Pinia so that the store is initialized by data passed to it from Inertia within app.js, preferably before components are mounted so data is there right from the beginning (so I don't have to wrap everything in computed because its value isn't immediately loaded)

I can see from Vue DevTools that the store is being initialized with the proper data, but I've tried implementing every way of referencing the data within the store I could find online, but I'm not getting any clear success.

Here's the current rundown of my environment:

HandleInertiaRequests.php contains:

...
public function share(Request $request):array{
	return ['app'=>array_merge(
		'admin'=>...
		'csrf'=>...
		'env'=>...
		'errors'=>...
		'jetstream'=>...
		'settings'=>...
		'status'=>...
		'user'=>...
		'ziggy'=>...
	],
)];
...

My AppStore.js file:

import {defineStore} from 'pinia';

export const useAppStore=defineStore('app',{
	getters:{
		authenticated:()=>!this==null&& !this?.user==null,
		administrator:()=>!this==null&& !this?.user==null&&this?.user?.id===1,
	},
	actions:{
		init(props){this.$state=props;},
		routeExists:(routeName)=>!this?.ziggy==null&&routeName in this?.ziggy?.routes,
	}
});

Part of my app.js file includes:

createInertiaApp({
	...
	setup({el,App,props,plugin}){
		let appCreated=createApp({render:()=>h(App,props)})
			...
			.use(createPinia())
			...
		const appStore=useAppStore();
		/* Is it possible to call appStore.init() here so the store is initialized before mount? */
		appCreated.mount(el);
		appStore.init(props.initialPage.props.app);
		return appCreated;
	},
}).then();

My components that access the store include:

<script setup>
import {useAppStore} from 'AppStore.js';
const $=useAppStore();
</script>

My problem is that I cannot seem to properly access store values from outside the app... in Vue Devtools, $ shows up in the setup section (but doesn't have any stored data), and the store shows up as a separate section as a Pinia store (with the properly initialized data), if that makes sense... https://imgur.com/a/G7IE6vV

I initially played around with the state method inside the store (including trying both state method formats) but no matter what I did, the store in $ was never overridden with the proper data from Inertia, and would only show up properly in the Pinia section in Vue DevTools

0 likes
1 reply
remicare's avatar

Have you solved this?

I have kind of the same problem. I'm using laravel 10 with inertia vue and vite. I'm just trying to access a store outside a component ( for exemple: accessing a store from another store).

I get this error :

caught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
	const pinia = createPinia()
	app.use(pinia)
This will fail in production.
    at useStore (pinia.mjs:1693:19)
    at user.js?t=1682084797597:6:24

According to Pinia documentation : Here

It' fails because it's called before the pinia is created. it saids : "The easiest way to ensure this is always applied is to defer calls of useStore() by placing them inside functions that will always run after pinia is installed.".

But i don't know how to do it with Inertia.

Please or to participate in this conversation.