https://github.com/hannoeru/vite-pages

Using ⚡️Vite's glob import to generate routes
https://github.com/hannoeru/vite-pages

Last synced: 11 days ago
JSON representation

Using ⚡️Vite's glob import to generate routes

• Host: GitHub
• URL: https://github.com/hannoeru/vite-pages
• Owner: hannoeru
• License: mit
• Created: 2021-02-03T10:54:23.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-02-20T09:09:04.000Z (9 months ago)
• Last Synced: 2024-10-11T22:09:12.700Z (28 days ago)
• Language: TypeScript
• Size: 92.8 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-pages

[![npm version](https://img.shields.io/npm/v/vite-pages)](https://www.npmjs.com/package/vite-pages)

> File system based routes generator for vue-router using [Vite](https://github.com/vitejs/vite)'s [glob import](https://vitejs.dev/guide/features.html#glob-import).

## Getting Started

Install vite-pages:

```bash

$ npm install vite-pages

```

Add to your app entry:

```js

import App from './App.vue'

import { createApp } from 'vue'

import { createRouter, createWebHistory } from 'vue-router'

import { generateRoutes } from 'vite-pages'

// https://vitejs.dev/guide/features.html#glob-import

const pages = import.meta.glob('./pages/**/*.vue')

const options = {}

const routes = generateRoutes(pages, options),

const app = createApp(App)

const router = createRouter({

  history: createWebHistory(),

  routes

});

app.use(router)

```

## Configuration

```ts

interface Options {

  /**

   * @default ["vue", "md"]

   */

  extensions: string[]

  /**

   * @default "pages"

   */

  pagesDir: string

  extendRoute?: (route: Route, parent: Route | undefined) => Route | void

}

```

### pagesDir

Relative path to the pages directory. Supports globs.

**Default:** `'pages'`

### extensions

Array of valid file extensions for pages.

**Default:** `['vue', 'md']`

### extendRoute

A function that takes a route and optionally returns a modified route. This is useful for augmenting your routes with extra data (e.g. route metadata).

```js

const options = {

  extendRoute(route, parent) {

    if (route.path === '/') {

      // Index is unauthenticated.

      return route;

    }

    // Augment the route with meta that indicates that the route requires authentication.

    return {

      ...route,

      meta: { auth: true },

    }

  },

}

```