Unable to access Pinia inside Routes.js file

[AhmedHamdy-B]

Description

guys I am trying to use Pinia inside routes.js file and it says Pinia is not installed,
the routes gets compiled before the Pinia is initialized thats why I cant do that, and I cant reconfigure that as it is done under the hood by quasar. can anyone help?
my purpose is just to make a condition redirect for users in case there is something in the store that I will be checking with pinia. like if user is admin, and he goes to page X it is ok but if not it will redirect to other page etc...

Documentation Section URL

No response

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite), Plugins (quasar), SPA Mode

[pdanpdan]

you get the store as a param of the router create function.
And you cannot use use like this (without the store) except when in a setup function.
Check the docs for Pinia and for Quasar please

[AhmedHamdy-B]

so should I pass the store to the router create function, and if that's the solution, can you plz tell me how to do that I passed it here, so how can I use it inside the routes.js file which creates the routes.
thank you so much for your help @pdanpdan

[metalsadman]

@AhmedHamdy-B
make your routes.js a function to receive the store context from src/router/index.js as param.
ie.

// src/router/routes.js
export default function (store) {
  const userStore = useUserStore(store)
  const routes = [
     ... userStore.something
   ...
  return routes
}

// src/router/index.js
export default route(function ({ store } ...
 ...
  const Router = createRouter ...
    routes: routes(store),
...

https://stackblitz.com/edit/quasarframework-oagn9v

[ReaganM02]

@metalsadman Hi, I am a newbie to router,pinia, and quasar. your code has an error on routes(store).

[metalsadman]

@metalsadman Hi, I am a newbie to router,pinia, and quasar. your code has an error on routes(store).

thanks updated the snippet, but do know that it's just an example. see it in action here https://stackblitz.com/edit/quasarframework-oagn9v open your console.

[AhmedHamdy-B]

@metalsadman thank you so much, it works fine now, much appreciated ♥

[adgower]

@metalsadman I appreciate the example

If I modify like you showed it works fine, until I import my store then when I use my login route and login it throws success and error. If i comment out the import store etc then it works fine like it did before. Any tips? says in console:"cant access error.response.data.message" or something

useAuthStore.js:

import { defineStore } from "pinia";
import { Loading, Notify } from "quasar";
import { api } from "src/boot/axios";

export const useAuthStore = defineStore("auth", {
  state: () => ({
    isAuthenticated: false,
  }),

  getters: {},

  actions: {
    login(form) {
      Loading.show();
      // csrf token
      api
        .get("/sanctum/csrf-cookie")
        .then(() => {
          api
            .post("/login", form)
            .then((response) => {
              this.isAuthenticated = true;
              Loading.hide();
              Notify.create({
                message: "Login successful",
                type: "positive",
              });

              this.router.push({ name: "dashboard" });
            })
            .catch((error) => {
              console.log(error);

              Loading.hide();
              Notify.create({
                message: error.response.data.message,
                type: "negative",
              });
            });
        })
        .catch((error) => {
          Loading.hide();
          Notify.create({
            message: error.response.data.message,
            type: "negative",
          });
        });
    },
    logout() {
      Loading.show();
      api
        .post("/logout")
        .then((response) => {
          this.isAuthenticated = false;
          Loading.hide();
          Notify.create({
            message: "Logout successful",
            type: "positive",
          });
          this.router.push({ name: "login" });
        })
        .catch((error) => {
          Loading.hide();
          Notify.create({
            message: error.response.data.message,
            type: "negative",
          });
        });
    },
  },
});

index.js:

import { route } from "quasar/wrappers";
import {
  createRouter,
  createMemoryHistory,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";
import routes from "./routes";

/*
 * If not building with SSR mode, you can
 * directly export the Router instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Router instance.
 */

export default route(function ({ store }) {
  const createHistory = process.env.SERVER
    ? createMemoryHistory
    : process.env.VUE_ROUTER_MODE === "history"
    ? createWebHistory
    : createWebHashHistory;

  const Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    routes: routes(store),

    // Leave this as is and make changes in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    history: createHistory(process.env.VUE_ROUTER_BASE),
  });

  return Router;
});

routes.js:

import { useAuthStore } from "src/stores/useAuthStore";

export default function (store) {
  // const useAuth = useAuthStore(store);

  const routes = [
    {
      path: "/",
      component: () => import("layouts/MainLayout.vue"),
      children: [
        // DashboardPage.vue
        {
          path: "dashboard",
          component: () => import("pages/DashboardPage.vue"),
          name: "dashboard",
        },

        // LoginPage.vue
        {
          path: "login",
          component: () => import("pages/LoginPage.vue"),
          name: "login",
        },
      ],
    },

    // Always leave this as last one,
    // but you can also remove it
    {
      path: "/:catchAll(.*)*",
      component: () => import("pages/ErrorNotFound.vue"),
    },
  ];

  return routes;
}

This works as normal because I commented out:

  // const useAuth = useAuthStore(store);