getActivePinia not found

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

Originally posted by @Trink3t in #16677 (comment)

[rstoenescu]

The main.ts is not needed because we have boot files.
You need to create a boot file specifically for this and dynamically add the route which uses Pinia.

The order in which the app is created (with all of its components - router/pinia/etc) is described in the Quasar App Flow section of the boot files page in docs.

[dpadula]

Sorry @rstoenescu, I'm confused, the Quasar App Flow, says that the order is:

4. App.vue is loaded (not yet being used)
5. Store is imported (if using Pinia in src/stores or Vuex in src/store)
6. Pinia (if using) is injected into the Vue app instance
7. Router is imported (in src/router)
8. Boot files are imported

How it would be the right way of using or accessing Pinia in App.vue (I need to access it over the top of all layouts) if I'd need something like this in App.Vue

<script setup lang="ts">
import { useQuasar } from 'quasar';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useCounterStore } from './stores/storeCounter';


onMounted(() => {
    const storeCounter = useCounterStore();
});

I mean, what is the correct order to use Pinia en Quasar in order to achieve this ?

UPDATE: Sorry, the problem occurs when I have tried to access one store that inside try to access another store, in this case, "storeAuth"

import { reactive, ref, computed } from 'vue';
import { defineStore } from 'pinia';
import { UserDetails } from '../models/auth';
import { useStoreAuth } from './storeAuth';

export const useCounterStore = defineStore('counter', () => {

  const counter = ref(6);

  const doubleCount = computed(() => {
    return counter.value * 2;
  });

  const increment = () => {
    const storeAuth = useStoreAuth(); // <---this line cause the problem
    counter.value++;
  };

  return {
    counter,
    doubleCount,
    increment,
  };
});

[dpadula]

After some research I've found this. I guess I have this problem.