LOAD Pinia/VueX before Vue Router,

[Trink3t]

How to override Quasar to load Pinia first before router.

I am getting a error on getActivePinia.

[metalsadman]

how are you using it? a snippet would help, if you are using it in your routes.js/routes.ts, then you need to use it inside a function.

// src/router/routes.js
function routes(){
  const someStore = useSomeStore()
  // can use store here
  return [ ...myRoutes ]
}
// srs/router/index.js
import { routes } from './routes.js'
...
const Router = createRouter({
    routes: routes(),
    ...
  });
...

you can also pass the store context inside src/router/index.js default function's parameter
export default route((/*{ store <--- this ,ssrContext }*/) => {

[Trink3t]

Snippet of my src/router/routes.ts

import { useStudentStore } from '@/stores/StudentStore';

const routes: RouteRecordRaw[] = [
{
    path: 'allstudents/:id',
    name: 'student_data',
    component: () => import('@/pages/Main/Students/StudentDataPage.vue'),
    meta: {
        breadcrumbs: [...] as Breadcrumb[],
    },
    beforeEnter: (to: any, from: any, next: any) => {
        const student = useStudentStore(); //when i put a pinia store, it can't find the initialized Pinia instance
        const breadcrumbs: Breadcrumb[] = to.meta.breadcrumbs as Breadcrumb[];
        breadcrumbs[breadcrumbs.length - 1].label = to.params.id;

        next();
  },
]

Since Quasar CLI (with VITE) doesn't have a main.ts, I can't do this...

import { useUserStore } from '@/stores/user'
import { createPinia } from 'pinia';
import { createApp } from 'vue'
import App from './App.vue'

// ❌  fails because it's called before the pinia is created
const userStore = useUserStore()

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)

// ✅ works because the pinia instance is now active
const userStore = useUserStore()

Here is the error from console.

[metalsadman]

you do it in a boot file https://quasar.dev/quasar-cli-webpack/boot-files/