My main.ts:
import './assets/tailwind.css'
import './assets/wordpress.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
And I’m trying to use a store in App.vue:
<script setup lang="ts">
import NavigationBar from '@/components/navigation/NavigationBar.vue'
import TopBar from '@/components/header/TopBar.vue'
import NavigationDrawer from '@/components/navigation/NavigationDrawer.vue'
import { onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ErrorSnackbar from '@/components/ErrorSnackbar.vue'
import { useUser } from '@/stores/user'
const router = useRouter();
const route = useRoute()
onMounted(() => {
const user = useUser()
user.signInSilent()
});
</script>
But I’m getting following error:
Uncaught Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?
See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help.
This will fail in production.
useStore pinia.mjs:1709
<anonymous> user.ts:9
pinia.mjs:1709:18
useStore pinia.mjs:1709
<anonymous> user.ts:9
I don’t understand this. Even with setActivePinia it still does not work. And the app is mounted at the end of main.ts. So why does it not work and how can I fix it?
4
The issue has to do with something else, unrelated to App.vue itself.
In the user store I was using another store:
import { defineStore } from 'pinia'
import { useErrors } from '@/stores/errors'
const errors = useErrors()
export const useUser = defineStore('user', () => {
const currentLoginToken = ref<string | null>(null)
// ...
})
The problem is that const errors = useErrors() is in the root level and thus already executed at import time which is before anything else runs in App.vue and since main.ts imports App.vue, it also runs before anything in main.ts runs and thus causes the error.
main.ts ---- imports ----> App.vue ---- imports ----> user.ts ---- uses ----> useErrors()
And useErrors() would run before app.use(createPinia()). So to solve this, move the line to inside the store:
import { defineStore } from 'pinia'
import { useErrors } from '@/stores/errors'
export const useUser = defineStore('user', () => {
const errors = useErrors()
const currentLoginToken = ref<string | null>(null)
// ...
})
2
It seems there might be a misunderstanding; setActivePinia is not necessary in order to use Pinia in your application, it’s used for testing. app.use(pinia) will attach your Pinia instance to your application. Simply removing the line setActivePinia(pinia) should accomplish what you want
3