---
title: "Frameworks"
description: "The framework kits (@devframes/vite, @devframes/nuxt, @devframes/next) integrate devframe with a meta-framework's dev server. Two subpaths:"
canonical_url: "https://devfra.me/frameworks"
---
# Frameworks

> The framework kits (@devframes/vite, @devframes/nuxt, @devframes/next) integrate devframe with a meta-framework's dev server. Two subpaths:

The framework kits ([`@devframes/vite`](https://devfra.me/frameworks/vite), [`@devframes/nuxt`](https://devfra.me/frameworks/nuxt), [`@devframes/next`](https://devfra.me/frameworks/next)) integrate devframe with a meta-framework's dev server. Two **subpaths**:

| Scope      | Subpath      | You are…                                                                                  |
| ---------- | ------------ | ----------------------------------------------------------------------------------------- |
| **single** | `.../single` | building & dev-serving a **single devframe's SPA** with that tool                         |
| **hub**    | `.../hub`    | mounting a whole **[hub](https://devfra.me/guide/hub)** (many devframes) inside that tool |

The bare package root throws, pointing to the two subpaths.

| Package                                                | single                                                            | hub                                   |
| ------------------------------------------------------ | ----------------------------------------------------------------- | ------------------------------------- |
| [`@devframes/vite`](https://devfra.me/frameworks/vite) | `devframeVitePlugin` / `devframeViteBridge` / `devframeVite`      | `viteDevframeHub` (+ `/hub/client`)   |
| [`@devframes/nuxt`](https://devfra.me/frameworks/nuxt) | the Nuxt module (`modules: ['@devframes/nuxt/single']`)           | the hub Nuxt module (+ `/hub/client`) |
| [`@devframes/next`](https://devfra.me/frameworks/next) | `withDevframe` + `createDevframeNextHandler` (+ `/single/client`) | `nextDevframeHub` (+ `/hub/client`)   |

## single: author one devframe

For framework-neutral CLI/build/embedded outputs, use the [adapters](https://devfra.me/adapters) instead.

## hub: mount a hub

Each `hub` scope wraps [`initHub`](https://devfra.me/guide/hub-initiate) and defaults the UI to [`@devframes/hub-ui`](https://devfra.me/guide/build-your-own-hub-ui)'s `createUi()` (`ui` to override, `ui: false` for headless). Per tool: **[Vite](https://devfra.me/frameworks/vite#mounting-a-hub)**, **[Nuxt](https://devfra.me/frameworks/nuxt#mounting-a-hub)**, **[Next](https://devfra.me/frameworks/next#mounting-a-hub)**.

`@devframes/vite/hub` and `@devframes/nuxt/hub` recommend the native hub UI providers ([Vite DevTools](https://devtools.vite.dev), [Nuxt DevTools](https://devtools.nuxt.com)) once (silence with `{ quiet: true }`). Next has none, so `@devframes/next/hub` stays quiet.

A framework that wants DevTools as an opt-in install ships [`@devframes/hub-ui-onboard`](https://devfra.me/guide/hub-ui-onboard) instead of the hub and lets the user install it from a floating button.


## Sitemap

See the full [sitemap](https://devfra.me/sitemap.md) for all pages.