Error with Vue 2: getActivePinia was called with no active Pinia. Did you forget to install pinia?

[pennal]

Reproduction

I have an app, written in vue 2 with TypeScript that previously used VueX for the state. I am trying to migrate to Pinia but I keep on getting the same error:

 Uncaught 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.

This is shown in the browser console. The project is built correctly, and the dev server starts with no problem, but when opening the page it is blank and the error is shown on the console.

I followed the example at https://github.com/piniajs/example-vue-2-vite, although I am not using Vite as of now (could that be an issue?). I installed both Pinia, and the recommended @vue/composition-api package using yarn. I also read about the usage without the setup() here: https://pinia.esm.dev/cookbook/options-api.html

This is my main.ts:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// import store from './store'
import { createPinia, PiniaVuePlugin } from 'pinia'
import './main.css'

Vue.config.productionTip = false


Vue.use(PiniaVuePlugin);
const pinia = createPinia();

new Vue({
  router,
  pinia,
  render: h => h(App)
}).$mount('#app')

My store is defined as follows:

import { defineStore } from "pinia";

export const useSettingsStore = defineStore('settings', {
    state: () => ({
        location: '',
        travelTime: 2
    }),
    actions: {
        updateLocation(location: string): void {
            this.$patch({
                location: location
            })
        },
        updateTravelTime(travelTime: number): void {
            this.$patch({
                travelTime: travelTime
            })
        }
    }
})

And I am using it like so in my component (simplified):

<template>
    // Removed as not needed
</template>

<script lang="ts">
// ...Other imports

import { useSettingsStore } from "@/store/settingsStore";
const settings = useSettingsStore();

@Component({
    components: {
        Autocomplete,
        Button
    }
})
export default class SettingsView extends Vue {
    // Not needed

    get location(): string {
        return settings.location
    }

    get travelTime(): number {
        return settings.travelTime
    }

    private updateTravelTime(travelTime: number): void {
        settings.updateTravelTime(travelTime);
    }

    private updateLocation(location: string): void {
        settings.updateLocation(location);
    }

    

    selectedStation(data: string) {
        this.updateLocation(data)
    }

    updatedTime() {
        this.updateTravelTime(this.time);
    }
    

    created() {
    }
}
</script>

Steps to reproduce the behavior

1. Build the project with yarn serve
2. Open the page (usually localhost:8080) and observe the errors

Additional information

package.json

{
  "name": "test-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@tailwindcss/forms": "^0.3.4",
    "@vue/composition-api": "^1.4.0",
    "axios": "^0.24.0",
    "core-js": "^3.6.5",
    "fuse.js": "^6.4.6",
    "pinia": "^2.0.4",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vuedx/typescript-plugin-vue": "^0.7.4",
    "autoprefixer": "^9",
    "node-sass": "^4.12.0",
    "postcss": "^7",
    "sass-loader": "^8.0.2",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "typescript": "~4.1.5",
    "vue-template-compiler": "^2.6.11"
  }
}

[posva]

This error means you are trying to create a store (via useSomeStore()) before app.use(pinia) is called. This can happen because you are calling useSettingsStoer() outside of the component setup at the root of a vue file. You need to use the store inside of setup() or use mapStores

[iamgabrielsoft]

this is absolutely correct, if your setting the store outside the component you intend to, this will likely happen

[pennal]

Thanks for the info, looks like I got confused. Unfortunately I am not able to get this to work. I changed my implementation to:

<template>
    // Removed as not needed
</template>

<script lang="ts">
// ...Other imports

import { mapStores } from 'pinia'
import { useSettingsStore } from "@/store/settingsStore";

@Component({
    components: {
        Autocomplete,
        Button
    },  
    computed: {
      ...mapStores(useSettingsStore)
    }
})
export default class SettingsView extends Vue {
    // Not needed

    get location(): string {
        return this.settingsStore.location
    }

   // ...Other computed properties
}
</script>

but I get the following error:

Property 'settingsStore' does not exist on type 'SettingsView'.

I tried with this.settings as well but the same error is thrown. I followed the same process as described in this issue: vuejs/vue-class-component#109. I am afraid there is some point I am missing with the spread operator. Any hints or suggestions?

[pennal]

So I have done a bit more digging, and it looks like the state can be used without any major issues, as long as the keys are redefined:

<template>
  // Not needed
</template>

<script lang="ts">
// Other imports
import "@/types/api.types";
import { transportService } from '@/services/TransportService';

import { useSettings } from "@/store/settingsStore";
import { mapState } from "pinia";


@Component({
  computed: {
    ...mapState(useSettings, {
      location: 'location'
    })
  }
})
export default class Home extends Vue {
  // Other fields

  // For some reason, the field from the state has to be redefined here otherwise it throws errors
  private location!: string;


  async getStationBoard() {
    const [error, stationBoardResponse] = await transportService.getStationBoard(this.location);
    // Process the result
  }

  created() {
    this.getStationBoard()
  }
}
</script>

Unfortunately I still cannot use the store directly, and I am afraid I am missing something very basic regarding the setup

[tamland]

Explicitly passing the pinia instance to useStore seems to work (?)

import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin);
const pinia = createPinia();
const useStore = defineStore('main', { ... })

const store = useStore(pinia) // Works, but not without passing pinia

new Vue({
  pinia,
  render: h => h(App)
}).$mount('#app')

[shawn-mty]

You're a mega bro. Love you <3

[RacerDelux]

Not sure if this helps, I had the same issue. Before my .use had vuetify and pinia in the same use statement. Once I broke it out like below it worked fine.

createApp(App)
    .use(createPinia())
    .use(vuetify)
    .component('font-awesome-icon', FontAwesomeIcon)
    .mount('#app')

[serefarikan]

If anybody arrives at this page with a google search after creating a Quasar sample project using the CLI (with typescript), then following the quasar documentation for using pinia:
you need to add the pinia initalisation code to a boot file. client-entry.js will do

import { createPinia} from 'pinia';
// ...
app.use(createPinia())
app.use(router)
// ....

The cli won't give you the main.ts others are talking about. So you need to do the above. See boot files in https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js as suggested by the README that is generated by the CLI.

[iamgabrielsoft]

Other than the aforementioned solution, one could forget to initialized the store on the same project but with multiple pages(Multiple page Application) that was in my case

[jadsow]

I have the same problem.
I use setup on my components.

My index store:

My store:

My component:

Error:

Can anybody help me please?