Simplifying Vue Router with Vue Route Handler: A Laravel-inspired Approach

Vue Route Handler is a powerful library designed to streamline the process of defining routes for Vue Router. Taking inspiration from the elegant structure of Laravel routes, this library offers a fluent and expressive syntax for constructing routes in Vue applications.

Installation

To get started with Vue Route Handler, simply install the latest version using npm or yarn:

npm i vue-route-handler
# or
yarn add vue-route-handler

Overview

Vue Route Handler simplifies the declaration of route definitions for Vue Router by employing chained calls, reminiscent of Laravel. This allows you to easily group and nest routes as deeply as necessary.

Let’s explore a basic example:

import { createRouter, createWebHistory } from "vue-router";
import { Factory, Guard, Route } from "vue-route-handler";
import Home from "./views/Home.vue";
import About from "./views/About.vue";


Route.view({ path: "/", view: Home }).name("home");
Route.view({ path: "about", view: About }).name("about");

const router = createRouter({
  routes: Factory.routes(),
  history: createWebHistory(),
});

export default router;

The above code sets up a router using the Vue Route Handler, providing a clean and organized way to define routes.

Laravel-inspired Structure

Taking inspiration from Laravel, Vue Route Handler introduces a familiar structure to Vue Router. You can group routes, apply guards, and nest routes within each other, creating a hierarchy that mirrors the organization of your application.

Using Resolver for Dynamic Imports

Vue Route Handler supports dynamic imports using the usingResolver method and import.meta.globEager. This allows you to import views dynamically, providing a more efficient and modular approach to managing your views.

Package Link :https://www.npmjs.com/package/vue-route-handler
Demo Link: https://vue-route-handler.vercel.app/