Nuxt Auto CRUD (Full Stack Example)

Nuxt Auto CRUD

Automatic CRUD API & UI for Nuxt applications

Login

Demo Credentials (Password: $1Password)

Admin

Full Access

admin@example.com

Manager

CRUD Access

manager@example.com

Moderator

Read Only

moderator@example.com

Features

  • Authentication: Built-in session management using nuxt-auth-utils
  • Authorization: Fine-grained access control per resource and action using nuxt-authorization
  • Automatic APIs: CRUD endpoints created automatically from Drizzle schema using nuxt-auto-crud
  • Relations: Automatic handling of relationships between resources
  • Dynamic UI: Reusable Table and Form components that adapt dynamically to any resource or model

How to use this Template

Explore the capabilities of Nuxt Auto CRUD with this interactive demo.

1

Test Auth

Log in with different roles (Admin, Manager, Moderator) to see the effect. Permissions are now fully Database-Driven!

2

Extend Schema

Add new tables in server/database/schema and restart the server to use the new tables. If needed use 'npm db:generate'

Database Schema Structure

Permissions are now managed via DB tables

To manage permissions, you simply add or modify records in specific database tables:

  • roles: Define user roles (e.g., Admin, Editor)
  • resources: Define what to protect (e.g., Posts)
  • permissions: Define actions (e.g., Create, Read)
  • role_resource_permissions: Link them all together

Built with Nuxt, Drizzle ORM, and nuxt-auto-crud