# vite-plugin-lazy-routes

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

Latest version **0.0.13** (published 2023-05-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-lazy-routes
pnpm add vite-plugin-lazy-routes
yarn add vite-plugin-lazy-routes
bun add vite-plugin-lazy-routes
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.13 |
| Published | 2023-05-19 |
| First published | 2023-03-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16 |
| Dependencies | 3 |
| Unpacked size | 44 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | argarcia-npm |
| Keywords | vite, react, remix, run, routes, routing, router, pages, plugin, file, based, lazy |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-lazy-routes
- Repository: https://github.com/argarcia-ottersoft/vite-plugin-lazy-routes
- Issues: https://github.com/argarcia-ottersoft/vite-plugin-lazy-routes/issues
- npm.io page: https://npm.io/package/vite-plugin-lazy-routes

## Dependencies (3)

- [fast-glob](https://npm.io/package/fast-glob.md) ^3.2.12
- [minimatch](https://npm.io/package/minimatch.md) ^7.4.3
- [typescript](https://npm.io/package/typescript.md) ^4.9.5

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 0.0.13 (latest) — 2023-05-19
- 0.0.12 — 2023-04-21
- 0.0.11 — 2023-04-21
- 0.0.10 — 2023-04-21
- 0.0.9 — 2023-04-21
- 0.0.8 — 2023-04-21
- 0.0.7 — 2023-04-15
- 0.0.6 — 2023-04-15
- 0.0.5 — 2023-04-15
- 0.0.4 — 2023-04-15
- 0.0.3 — 2023-03-30
- 0.0.2 — 2023-03-24
- 0.0.1 — 2023-03-23

## README

# vite-plugin-lazy-routes

Use [Remix](https://github.com/remix-run/remix) lazy flat-route routing in your [Vite](https://github.com/vitejs/vite) project.

## Plugin config

```js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import lazyRoutes from "vite-plugin-lazy-routes";

export default defineConfig({
  plugins: [react(), lazyRoutes()],
});
```

**With options:**

```js
lazyRoutes({
  /* options here */
});
```

## 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

```js
import lazyRoutes from "virtual:lazy-routes";
```

**Example**

```jsx
import { render } from "react-dom";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import lazyRoutes from "virtual:lazy-routes";

// Note: This example only works with react-router >= 6.4
const router = createBrowserRouter([
  {
    path: "/",
    children: lazyRoutes,
    // You can add your own `element`, `errorElement`, `loader`, ...
  },
]);

render(
  <RouterProvider router={router}>
    <App />
  </RouterProvider>,
  document.querySelector("#app")
);
```

## 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.

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

## Similar projects

### vite-plugin-pages

This project is inspired by [`vite-plugin-remix-routes`](https://github.com/vjee/vite-plugin-remix-routes)

## License

[MIT](https://github.com/argarcia-ottersoft/vite-plugin-lazy-routes/blob/main/LICENSE)

---
_Source: https://npm.io/package/vite-plugin-lazy-routes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._