Uno Documentation

Router

Router Configuration

The routing is based on the react-router-dom. You can find all routes inside this file src/router/index.ts . Uno routing system uses code splitting for improved performance.

router.ts

import { createRouter, createWebHistory } from "vue-router";
import NProgress from "nprogress";

// ==============================================================
declare module "vue-router" {
  interface RouteMeta {
    title?: string;
  }
}
// ==============================================================

// ROUTE GROUP FILES
import { usersRoutes } from "./usersRoutes";
import { ordersRoutes } from "./ordersRoutes";
import { supportRoutes } from "./supportRoutes";
import { productRoutes } from "./productsRoutes";
import { invoicesRoutes } from "./invoicesRoutes";
import { settingsRoutes } from "./settingsRoutes";
import { dashboardRoutes } from "./dashboardRoutes";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "Home",
      component: () => import("@/pages/home/index.vue"),
      meta: { title: "Uco - Admin & Client Dashboard Template" },
    },
    {
      path: "/dashboards",
      name: "Dashboards",
      redirect: "/course",
      component: () => import("@/layout/DefaultLayout.vue"),
      children: [
        ...dashboardRoutes,
        ...usersRoutes,
        ...productRoutes,
        ...ordersRoutes,
        ...invoicesRoutes,
        ...supportRoutes,
        ...settingsRoutes,
      ],
    },
    {
      path: "/login",
      name: "Login",
      component: () => import("@/pages/sessions/Login.vue"),
      meta: { title: "Login" },
    },
    {
      path: "/register",
      name: "Register",
      component: () => import("@/pages/sessions/Register.vue"),
      meta: { title: "Register" },
    },
    {
      path: "/forget-password",
      name: "ForgetPassword",
      component: () => import("@/pages/sessions/ForgetPassword.vue"),
      meta: { title: "Forget Password" },
    },
    {
      path: "/verification",
      name: "Verification",
      component: () => import("@/pages/sessions/Verification.vue"),
      meta: { title: "Verification" },
    },
    {
      name: "NotFound",
      path: "/:pathMatch(.*)*",
      component: () => import("@/pages/sessions/NotFound.vue"),
      meta: { title: "404" },
    },
    {
      name: "ServerError",
      path: "/server-error",
      component: () => import("@/pages/sessions/ServerError.vue"),
      meta: { title: "Server Error" },
    },
    {
      name: "Maintenance",
      path: "/maintenance",
      component: () => import("@/pages/sessions/Maintenance.vue"),
      meta: { title: "Maintenance" },
    },
  ],
});

router.beforeEach((to, _from, next) => {
  // START THE ROUTE PROGRESS BAR.
  if (to.name) NProgress.configure({ showSpinner: false }).start();

  // SET THE PAGE TITLE.
  if (to.meta.title)
    document.title = to.meta.title + " | Vue 3 Admin Dashboard";

  next();
});

router.afterEach(() => {
  // COMPLETE THE ANIMATION OF THE ROUTE PROGRESS BAR.
  NProgress.done();
});

export default router;

Folder Structure

The routing is based on the react-router-dom. You can find all routes inside this file src/router/index.ts. Uno routing system uses code splitting for improved performance.

└─ router
   ├─ index.ts
   ├─ dashboardRoutes.ts
   ├─ invoiceRoutes.ts
   ├─ orderRoutes.ts
   ├─ productRoutes.ts
   ├─ settingsRoutes.ts
   ├─ supportRoutes.ts
   └─ userRoutes.ts

How to add a new route?

To add a new route in your Vue Router configuration, you can follow the example below. Here is a step-by-step guide for adding a new route:

Open file src/router/index.ts and update the following file if you want to add more routes.
Add the new route within the routes array.

router.ts

import { createRouter, createWebHistory } from "vue-router";

// ROUTE GROUP FILES
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      name: "home",
      redirect: "/course",
      component: () => import("@/pages/Course.vue"),
    },
    // Existing routes...

    // Added new route
    {
      name: "new-route",
      path: "/new-route",
      component: () => import("@/pages/NewFile.vue"),
    },
  ],
});

export default router;

Layout

Data Fetching