Framework Adapters

ufbr is designed to be completely framework-agnostic. All adapters share the exact same createFileBasedRouter API contract, differing only in the subpath module you import and your framework’s typical file extensions.

Setup by Framework

Select your UI framework below to see its entry point initialization:

import { createFileBasedRouter } from 'ufbr/ziko'

createFileBasedRouter({
  pages: import.meta.glob('./pages/**/*.js'),
  target: document.body
})

import { createFileBasedRouter } from 'ufbr/preact'

createFileBasedRouter({
  pages: import.meta.glob('./pages/**/*.jsx'),
  target: document.getElementById('app')
})

import { createFileBasedRouter } from 'ufbr/react'

createFileBasedRouter({
  pages: import.meta.glob('./pages/**/*.jsx'),
  target: document.getElementById('root')
})

import { createFileBasedRouter } from 'ufbr/solid'

createFileBasedRouter({
  pages: import.meta.glob('./pages/**/*.jsx'),
  target: document.getElementById('root')
})

import { createFileBasedRouter } from 'ufbr/vue'

createFileBasedRouter({
  pages: import.meta.glob('./pages/**/*.vue'),
  target: document.getElementById('app')
})

import { createFileBasedRouter } from 'ufbr/svelte'

createFileBasedRouter({
  pages: import.meta.glob('./pages/**/*.svelte'),
  target: document.getElementById('app')
})

import { createFileBasedRouter } from 'ufbr/van'

createFileBasedRouter({
  pages: import.meta.glob('./pages/**/*.js'),
  target: document.getElementById('app')
})

Universal API Reference

Regardless of which adapter you use, createFileBasedRouter takes the exact same configuration object:

Parameter	Type	Required	Description
`pages`	`Record<string, () => Promise<any>>`	Yes	Result of Vite’s `import.meta.glob()` utility.
`target`	`HTMLElement`	Yes	The DOM element where page components will render.