@websideproject/nuxt-auto-admin

Auto-generated admin panel from Drizzle schema
2,273 13
vue nuxt nuxt-module dashboard admin-panel crud admin schema-driven drizzle drizzle-orm
Install
npm install @websideproject/nuxt-auto-admin
Latest Version:0.1.5
Vue:3
License:MIT
Last Updated:Oct 18, 2026
Links: GitHub  ·  npm
Maintainer: bgervan

@websideproject/nuxt-auto-admin

npm version npm downloads license

An admin panel generated from your @websideproject/nuxt-auto-api resources, built on Nuxt UI. Every resource you register gets a list, detail, create and edit page, and each caller sees exactly what the API allows them.

The admin's list page for an Articles resource: search, filters, export, row selection and per-row actions

  • Generated from the API registry — sidebar, dashboard and resource pages, no per-resource code
  • Permission-aware — buttons follow the API's rules, down to the row: Edit/Delete are disabled on records an objectLevel rule refuses
  • Forms from the schema — a widget per column type, many-to-many cards for junction tables
  • List tools — search, filters, pagination, bulk delete, CSV/JSON export
  • Extensible — custom pages, custom actions, widgets, branding and theming, dark mode

Install

npx nuxt module add @websideproject/nuxt-auto-admin

It needs @websideproject/nuxt-auto-api (set up with resources) and @nuxt/ui.

Quick start

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@websideproject/nuxt-auto-api', // before the admin, so its resources are registered
    '@websideproject/nuxt-auto-admin',
  ],
  autoAdmin: {
    prefix: '/admin',
    branding: { title: 'My Admin Panel' },
  },
})

The admin pages use the admin layout, which Nuxt renders only inside <NuxtLayout>:

<!-- app/app.vue -->
<template>
  <UApp>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </UApp>
</template>

Open /admin. A resource without authorization refuses every request (the API is deny-by-default), so its pages show "permission denied" until you declare who may do what.

Screenshots

From the repo's playground, taken by its CI:
The Filters popover: an Id range, a Title contains box, a Published select and a Created At date range The view dialog for article #1: every field as a label and value, with Edit and Delete
Filters per column type View in a dialog
Two rows selected and the bulk delete confirmation open The list as a regular user: drafts hidden, Create and Delete disabled, Edit and Delete disabled in the row menu
Bulk delete of the selected rows As a regular user: only what the API allows
The edit form of article #1 with Categories and Tags many-to-many cards The import dialog: upload a CSV, match its columns to fields, create the records
Edit with many-to-many cards Import from CSV

Documentation

Full documentation: websideproject.com/docs/nuxt-auto

Links

License

MIT

Related Packages

nuxt-crud-table

API-driven dynamic CRUD table and forms in Nuxt.js. Automatically reflects backe...

830 0
admin-panel crud drizzle drizzle-orm nuxt nuxt-module auto-crud auto-crud-ui crud-table crud-ui +3
@websideproject/nuxt-auto-api

Secure REST APIs for Nuxt from your Drizzle schema: deny-by-default authorizatio...

2,472 13
drizzle drizzle-orm nuxt nuxt-module schema-driven vue api authentication authorization rest-api
nuxt-auto-crud

Dynamic RESTful CRUD APIs for Nuxt without code generation, fully schema-driven.

9,575 26
crud nuxt nuxt-module auto-crud
@adminlte/nuxt

Nuxt module for @adminlte/vue — auto-imports, CSS, Bootstrap init, and SSR-safe...

1,455
dashboard nuxt nuxt-module vue adminlte bootstrap
nuxt-panes

Retained-page tabs for Nuxt. Real history, mounted panes, Chrome-like strip.

261 0
dashboard nuxt nuxt-module vue panes tabs

Version History

Version Released Vue License
0.1.5 ^3.0 MIT
0.1.4 ^3.0 MIT
0.1.3 ^3.0 MIT
0.1.2 ^3.0 MIT
0.1.1 ^3.0 MIT