getActivePinia was called with no active Pinia. Did you forget to install pinia?

[bjorntj]

Hi.

I am trying to convert to typescript but I get this problem when access the page:

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

I have the following in my main.ts file:```

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/tailwind.css'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import { useAuthStore } from "@/store/auth";
import { useCommonStore } from "@/store/common";
/*import setupInterceptors from '@/services/setupInterceptors'*/

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

const app = createApp(App)
/*app.config.productionTip = false*/
app.use(pinia)
app.use(router)

const authStore = useAuthStore();
const commonStore = useCommonStore();

/*setupInterceptors(authStore, commonStore);*/

app.mount('#app')

If I comment out the 2 lines that use the store, then I do not get any errors.
What am I missing? I am using the stores after app.use(pinia);

[scambier]

@bjorntj did you solve this error?

Ok, it's most likely because you're calling useAuthStore() from outside a component's setup, and it's called before Pinia is setup. #664 (comment)

[bjorntj]

Yes, I figured it out... :)

[ShuvobrotoBiswas]

then?

[AndrianD]

then @bjorntj wants you to rack your brains like him to find the solution, that's the help he's suggesting I think

[xiaoliuxuesheng]

I have the same problem

Vite + Vue project: This error occurs when using store in router.beforeeach after installing router and pinia

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import { UserStore } from '@/store/UserStore'

const userStore = UserStore()
const routes: RouteRecordRaw[] = []
const router = createRouter({
  history: createWebHistory(),
  routes
})
router.beforeEach((to, from, next) => {
  console.log(userStore)
  next()
})
export default router

[xiaoliuxuesheng]

Yes, that's how I solved it, and THEN I looked it up in the document

[zhoufanglu]

so how to use pinia in router file? got it on Pinia official website https://pinia.vuejs.org/core-concepts/outside-component-usage.html#single-page-applications

thank you share this document, i solve this problem

• put store in beforeEach

router.beforeEach((to) => {
  // ✅ This will work because the router starts its navigation after
  // the router is installed and pinia will be installed too
  const store = useStore()

  if (to.meta.requiresAuth && !store.isLoggedIn) return '/login'
})

[maicWorkGithub]

How to use store in web worker? Inside onmessage const store = useStore() still get same error.

[arm5472]

How to use store to create routes? I need to use store within createRouter to create routes array and I get the same error too.

[ilovepixelart]

If you still using Vue2 with Vite
Make sure you use PiniaVuePlugin before you use router

router.js or routes/index.js depending on your setup

import { PiniaVuePlugin } from 'pinia';

Vue.use(PiniaVuePlugin);
Vue.use(Router);

[zulfio]

In my case, I'm using the script setup style and forgot to write setup inside the opening script tag.

from this:
<script>
import { useUserDataStore } from "../../stores/UserData";

const userDataStore = useUserDataStore();
</script>

should be like this:
<script setup>
import { useUserDataStore } from "../../stores/UserData";

const userDataStore = useUserDataStore();
</script>

[Sharmacs8853]

thanks !! it helps

[marihemori]

thanks

[SantiPorres]

Thanks a lot!!!

[wawanneutron]

thanks brother

[PeterPilley]

This was the answer!!!. Been trying to solve this for a couple of days now thanks!!!!

[piroozjenabi]

Hi, everyone after a lot of research I found the answer to this issue,
you must pass index.ts/js for const like below:

`<script lang="ts" setup>
import store from '../stores/index';
import { useCounterStore } from '../stores/counter';

const counterStore = useCounterStore(store());
counterStore.increment();
console.log(counterStore.count);
</script>
`

[barbirict]

Thanks, you saved me three hours of pain haha. I'd like to add that all it took to fix it was changing

<script lang="js" setup>

to

<script lang="ts" setup>

Not even sure why I had it set to js lol.

[piroozjenabi]

nice

[ccosse]

fwiw this never happened for me until I upgraded quasar-cli from version 1 to version 2.
Initializing with store() as arg to useStore() is only way it works for me now.

[1714080902120]

i had the same problem when i used vitest and test a component outside src...
so i have to import main.ts in all test file before run test

[dxphilo]

Having the same issue here. I am testing a component that uses the pinia store. Unfortunately not sure what might be off. Testing it like so but its throwing the error.

import { describe, expect, test } from 'vitest'
import { mount } from '@vue/test-utils'
import Prompt from '../components/Prompt.vue'

describe('Promp component is mounted', () => {
  test('is mounted', () => {
    const wrapper = mount(Prompt)
    expect(wrapper.exists()).toBe(true)
  })
})

[amycai-arcadis]

I am having the same problem here, did you figure it out?

[amycai-arcadis]

I fixed it with:
import { setActivePinia, createPinia } from 'pinia'

and add:
beforeEach(() => {
// creates a fresh pinia and make it active so it's automatically picked
// up by any useStore() call without having to pass it to it:
// useStore(pinia)
setActivePinia(createPinia())
})

Full test case:
// stores/counter.spec.ts
import { setActivePinia, createPinia } from 'pinia'
import { useCounter } from '../src/stores/counter'

describe('Counter Store', () => {
beforeEach(() => {
// creates a fresh pinia and make it active so it's automatically picked
// up by any useStore() call without having to pass it to it:
// useStore(pinia)
setActivePinia(createPinia())
})

it('increments', () => {
const counter = useCounter()
expect(counter.n).toBe(0)
counter.increment()
expect(counter.n).toBe(1)
})

it('increments by amount', () => {
const counter = useCounter()
counter.increment(10)
expect(counter.n).toBe(10)
})
})

check the documentation here:
https://pinia.vuejs.org/cookbook/testing.html

[dxphilo]

Thanks

[franciscobaca]

You are a god. Thank you!

[LasanthaKathriarachchi]

Hi Guys,

I created a tableau extension, in which I want to render a map component using pinia.
Coding done using Vue + TS + JS.

This is how I try to load the app with map in the main.js file.

---

main.js

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import "./styles/general.scss";
import directives from "./directives";

const app = createApp(App);
directives(app);
const pinia = createPinia();
app.use(pinia);
app.mount('#app');

---

I'm getting this 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.

---

Please let me know, any thing more require to render the pinia map inside a tableau extension.

Thanks in advance,
Lasantha

[nukuutos]

Hi, guys maybe it will be helpful.

I encountered this problem in typescript project.
I created pinia store with .js extension: my-store.js and got this:
getActivePinia was called with no active Pinia. Did you forget to install pinia?

After changing filename extension to my-store.ts everything works well

[LasanthaKathriarachchi]

Hi Nikita Voloshin.

You are correct.
When the map-store as a ts file, it works. I tried it that way in a powerbi custom visual. There it didn't gave this error.
But when the same code used in a Tableau Extension, it needed to compile all the ts files into js files.
Then it doesn't work and gave this error.

Anybody knows how to solve the error, when the map-store used as a js file?

[clifford-devops3]

I had the same issue and the reason was that I had not included the setup keyword in my script

[DreiBelle]

how about mine/
// Navigation guard
router.beforeEach((to, from, next) => {
const authStore = useAuthStore(); // Replace this with your actual store or authentication logic

// Check if the route requires authentication
if (to.meta.requiresAuth) {
// Check if the user is authenticated
if (authStore.isAuthenticated) {
// User is authenticated, allow navigation
next();
} else {
// User is not authenticated, redirect to the login page
next('/Login'); // Change '/Login' to your actual login route
}
} else {
// If the route does not require authentication, allow navigation
next();
}
});

[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?

[svenhue]

create a quasar bootfile like this:

import { boot } from 'quasar/wrappers';
import { createPinia } from 'pinia';

// Be careful when using SSR for cross-request state pollution
// due to creating a Singleton instance here;
// If any client changes this (global) instance, it might be a
// good idea to move this instance creation inside of the
// "export default () => {}" function below (which runs individually
// for each client)

export default boot(({ app }) => {
  const pinia = createPinia();
  pinia.install(app);
});

And dont forget to register this file in your quasar.config.

[Catcheer]

in my case in the router file use

 component:  () => import('../views/UserInfo.vue')

instaed

import User from '../views/UserInfo.vue'

solved my promble

[mirrors-cl]

import { createPinia } from 'pinia';
import { useCounterStore } from '@/stores/counter';

const pinia = createPinia();
const store = useCounterStore(pinia);
console.log('storedata',store.orderData)