vite-plugin-lazy-routes

Use Remix lazy flat-route routing in your Vite project.

Plugin config

1import { defineConfig } from "vite";
2import react from "@vitejs/plugin-react";
3import lazyRoutes from "vite-plugin-lazy-routes";
4
5export default defineConfig({
6  plugins: [react(), lazyRoutes()],
7});

With options:

1lazyRoutes({
2  /* options here */
3});

Options

appDirectory

https://remix.run/docs/en/v1/api/conventions#appdirectory

• Optional
• Type: string
• Default: path.join(process.cwd(), "app")

An absolute path to the folder containing the routes folder.

ignoredRouteFiles

• Optional
• Type: string[]

https://remix.run/docs/en/v1/api/conventions#ignoredroutefiles

This is an array of globs (via minimatch) that Remix will match to files while reading your app/routes directory. If a file matches, it will be ignored rather that treated like a route module. This is useful for ignoring dotfiles (like .DS_Store files) or CSS/test files you wish to colocate.

Usage

1import lazyRoutes from "virtual:lazy-routes";

Example

1import { render } from "react-dom";
2import { createBrowserRouter, RouterProvider } from "react-router-dom";
3import lazyRoutes from "virtual:lazy-routes";
4
5// Note: This example only works with react-router >= 6.4
6const router = createBrowserRouter([
7  {
8    path: "/",
9    children: lazyRoutes,
10    // You can add your own `element`, `errorElement`, `loader`, ...
11  },
12]);
13
14render(
15  <RouterProvider router={router}>
16    <App />
17  </RouterProvider>,
18  document.querySelector("#app")
19);

TypeScript

If you use TypeScript you can add the following to your vite-env.d.ts file.
This will add types for the virtual:lazy-routes module.

1/// <reference types="vite-plugin-lazy-routes/virtual" />

Similar projects

vite-plugin-pages

This project is inspired by vite-plugin-remix-routes

License

MIT