I am using laravel-mix to bundle my Vue 3 and Pinia code. My app.js looks like this:

require('./bootstrap');

import { createApp } from 'vue'
import { createPinia } from "pinia";

const pinia = createPinia();
const app = createApp({});

app.use(pinia);
// ...
// ...
// ...
app.mount('#app');

The code in my Vue components is basic and NOT different from what is in the Pinia documentation https://pinia.vuejs.org/introduction.html#basic-example

However even though the laravel-mix sucessfuly compiled and bundled everything, the result page shows this error in the browser console:

getActivePinia was called with no active Pinia. Did you forget to install pinia?
    const pinia = createPinia()
    app.use(pinia)
This will fail in production.

CodePudding user response：

This did the trick for me - use setActivePinia(pinia) right after const pinia = createPinia();

import { createPinia, setActivePinia } from "pinia"
const pinia = createPinia();
setActivePinia(pinia);

Because you're using Pinia in a SSR ecosystem (Laravel), the process of setting up Pinia is a bit different from what is in the docs

1. Create a file \store\store.js which will serve as a starting point for Pinia:

import { createPinia, setActivePinia } from "pinia";
const pinia = createPinia();
setActivePinia(pinia);
export default pinia;

2. In app.js, import the pinia (exported from \store\store.js) and configure your app to use it:

require('./bootstrap');

import { createApp } from 'vue'
import pinia from './store/store' // importing Pinia
// import your components here

const app = createApp({});
app.use(pinia);
// ... use your components here
// ...
// ...
app.mount('#app');

3. Pinia-business as usual