Quasar boot file integration?

[francoism90]

Does anyone know how to call Pinia in a boot file?

This works fine:

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

export default boot(({ app }) => {
  app.use(createPinia());
});

However I would like to call Pinia in a second boot file, however it keeps saying the store doesn't exist:

// src/boot/auth.ts
import { boot } from 'quasar/wrappers';
import { useSessionStore } from 'src/store/session';

export default boot(({ app }) => {
   const store = useSessionStore(); // this doesn't work
});

Thanks!

[IlCallo]

Can you share the code of src/store/session?
What's your boot files order? Into quasar.conf.js > boot

[francoism90]

@IlCallo

// src/store/session.ts
import { defineStore } from 'pinia';
import { SessionState } from 'src/interfaces/session';

export const useSessionStore = defineStore({
  id: 'session',

  state: () => (<SessionState>{
    ...
  }),

  getters: {
    ...
  },

  actions: {
    ...
  },
});

// quasar.conf.js
boot: [
    'pinia',
    'i18n',
    'axios',
    'auth' // this one calls the session store.
  ],

[francoism90]

I'm now moving this logic to preFetch hooks, this seems to work fine.

[IlCallo]

Yeah, the problem here is that Pinia boot file hasn't been run when you execute the defineStore bit.
That's the same reason why router and store are managed on their own in Quasar and not via a boot file.

We run some experiments with Quasar + Pinia, but not official support as a drop-in replacement for Vuex unluckily

Check this out: https://github.com/TobyMosque/quasar-v2-ssr-pinia

[straurob]

I'm now moving this logic to preFetch hooks, this seems to work fine.

@francoism90 Could you share a code example? I'm having the same problem but I can't figure out how to do this.

[francoism90]

@straurob https://github.com/francoism90/mediadb-app/blob/9aaa980327772a4a02f432869fb8b170e0d17731/src/pages/VideoOverview.vue#L84

I'm just check on the page, instead of the router. It would be great to have a middleware solution.

[NaturalDevCR]

I can't make it work, somehow quasar won't recognize THIS to acess the state inside actions, i'm lost