Skip to content

Instantly share code, notes, and snippets.

@unsalkorkmaz
Last active December 10, 2022 14:37
Show Gist options
  • Save unsalkorkmaz/e5778d9b06a1659b4af5ff39217afdcc to your computer and use it in GitHub Desktop.
Save unsalkorkmaz/e5778d9b06a1659b4af5ff39217afdcc to your computer and use it in GitHub Desktop.
I wanted a pinia store data that comes from internet with fetching before createRouter() so I could use it for routes in Quasar Framework. My solution;
// /src/router/index.js
import { route } from "quasar/wrappers";
import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from "vue-router";
import routes from "./routes";
import { storeToRefs } from "pinia";
import { useFirmasiteStore } from "stores/firmasite";
/*
* 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(async function ({ store /*, ssrContext*/ }) {
const { settings, loading, error } = storeToRefs(useFirmasiteStore());
const { fetchSettings } = useFirmasiteStore(store);
await fetchSettings();
const createHistory = process.env.SERVER
? createMemoryHistory
: process.env.VUE_ROUTER_MODE === "history"
? createWebHistory
: createWebHashHistory;
const Router = createRouter({
scrollBehavior: () => ({ left: 0, top: 0 }),
routes: routes(settings),
// 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;
});
// /src/router/routes.js
export const routes = (settings) => {
return [
{
path: "/",
component: () => import(`../layouts/${settings.value._layout}.vue`),
children: [{ path: "", component: () => import("pages/FrontPage.vue") }],
},
// Always leave this as last one,
// but you can also remove it
{
path: "/:catchAll(.*)*",
component: () => import("pages/ErrorNotFound.vue"),
},
];
};
export default routes;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment