DEV Community

Cover image for Simplifying Vue Router with Vue Route Handler: A Laravel-inspired Approach
anil kumar thakur
anil kumar thakur

Posted on

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.


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
Enter fullscreen mode Exit fullscreen mode


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;
Enter fullscreen mode Exit fullscreen mode

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 :
Demo Link:

Top comments (0)