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

stuartcusack's avatar

Loading an initial state with Pinia

I'm very new to Inertia and Pinia and I'm wondering if I'm doing things correctly.

This is an SSR app and I want to load an initial state (shortlist.artists) into my Pinia store.

APP.JS

// ... import the usual stuff
import { createPinia } from 'pinia';
// Import my custom Pinia store
import { useShortlistStore } from '@/Stores/ShortlistStore.js'

createInertiaApp({
    ... // the usual stuff
    setup({ el, App, props, plugin }) {

        // IS THIS THE CORRECT WAY TO USE PINIA??
        const app = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(createPinia())
            .use(ZiggyVue, Ziggy)
            .mount(el);
        
       // IS THIS THE CORRECT WAY TO SET AN INITIAL STATE??
        const shortlist = useShortlistStore();
        shortlist.artists = props.initialPage.props.shortlist;

        return app;
    },
    ...// more stuff
});

SSR.JS

// ... import the usual stuff
import { createPinia } from 'pinia';
// Import my custom Pinia store (not sure if needed)
import { useShortlistStore } from '@/Stores/ShortlistStore.js'

createServer((page) =>
    createInertiaApp({
        ... // the usual stuff
        setup({ App, props, plugin }) {
            return createSSRApp({ render: () => h(App, props) })
                .use(plugin)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                })
                .use(createPinia());

           // IS THIS PART NEEDED IN SSR.JS?
           const shortlist = useShortlistStore();
           shortlist.artists = props.initialPage.props.shortlist;
        },
    })
);

props.initialPage.props.shortlist is provided by my HandleInertiaRequests Middleware.

This all works by the way, I'm just wondering if this approach will cause me issues down the line, or if there any negative implications for SSR. Thanks for any advice!

0 likes
2 replies
stuartcusack's avatar

I ran into a problem with this config. The SSR daemon was failing:

[Vue warn]: Unhandled error during execution of setup function 
  at <Default>
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.

So I added some stuff ssr.js as well as app.js. I have updated my original question to reflect this.

I'm not sure if state initialisation is necessary in ssr.js....?

Please or to participate in this conversation.