Resource Configuration
Resource Configuration
Configure how each resource appears and behaves in the admin panel.
Basic Configuration
Resources are configured in the autoAdmin.resources object:
export default defineNuxtConfig({
autoAdmin: {
resources: {
users: {
displayName: 'Users',
icon: 'i-heroicons-user-group',
group: 'User Management',
order: 1,
},
posts: {
displayName: 'Blog Posts',
icon: 'i-heroicons-document-text',
group: 'Content',
order: 2,
},
},
},
})
Resource Options
displayName
The human-readable name shown in the UI:
resources: {
users: {
displayName: 'Users', // Shown in sidebar, headers, breadcrumbs
},
}
If not specified, the resource name is automatically formatted (users → Users).
singularName
One record, for "Create Category", "Edit Category", "Category deleted" and "1 category deleted":
resources: {
people: {
displayName: 'People',
singularName: 'Person', // irregular plural: set it
},
}
If not specified, it is derived from displayName by English rules (Categories → Category, API Keys →
API Key, Addresses → Address; Status stays Status).
icon
Heroicon name for the resource:
resources: {
users: {
icon: 'i-heroicons-user-group',
},
posts: {
icon: 'i-heroicons-document-text',
},
settings: {
icon: 'i-heroicons-cog-6-tooth',
},
}
Browse available icons at: https://heroicons.com/
If not specified, a default icon is used.
group
Organize resources into collapsible groups in the sidebar:
resources: {
users: {
group: 'User Management',
},
roles: {
group: 'User Management',
},
posts: {
group: 'Content',
},
pages: {
group: 'Content',
},
}
Resources without a group appear at the top of the sidebar.
order
Control the display order within groups (or ungrouped):
resources: {
users: {
group: 'User Management',
order: 1, // Shown first
},
roles: {
group: 'User Management',
order: 2, // Shown second
},
}
Lower numbers appear first. If not specified, defaults to 0.
type
Specify the resource type:
resources: {
users: {
type: 'resource', // Default - shows in sidebar with full CRUD
},
articleCategories: {
type: 'junction', // Hidden from sidebar, managed through M2M relations
},
}
Types:
'resource'(default) - Regular resource with full admin UI'junction'- M2M junction table, hidden from sidebar
disabled
Temporarily disable a resource without removing its configuration:
resources: {
legacyData: {
disabled: true, // Resource exists but is hidden from admin
},
}
List View Configuration
listFields
Specify which fields to show in the list table:
resources: {
users: {
listFields: ['id', 'name', 'email', 'role', 'createdAt'],
},
}
If not specified, up to six columns are picked: the id, a title-like column (title, name, email, …), a
content-like column, a status column (published, status, …), one foreign key and publishedAt or
createdAt. Name columns only — a relation such as author is not a column and shows empty.
hiddenFields
Hide fields from all views (list, detail, forms):
resources: {
users: {
hiddenFields: ['password', 'passwordHash', 'resetToken'],
},
}
Common hidden fields:
- Passwords and sensitive data
- Internal IDs and foreign keys
- System fields like
deletedAt
Read-only fields
Mark a field read-only in formFields (readonly: true); it is shown in the form and
left out of the request. Fields the caller may not write (fields[x].write) are made read-only automatically.
Generated edit forms already show foreign-key columns ending in Id (except userId) read-only.
Form Configuration
Configure forms for create and edit operations:
resources: {
articles: {
formFields: {
create: [
{ name: 'title', widget: 'TextInput', required: true },
{ name: 'slug', widget: 'TextInput', required: true },
{ name: 'content', widget: 'TextareaInput' },
{ name: 'published', widget: 'CheckboxInput' },
],
edit: [
// Same as create, but you can customize differently
{ name: 'title', widget: 'TextInput', required: true },
{ name: 'slug', widget: 'TextInput', readonly: true },
{ name: 'content', widget: 'TextareaInput' },
{ name: 'published', widget: 'CheckboxInput' },
],
},
},
}
If formFields is not specified, the admin panel auto-generates forms from the schema. If it is, it replaces
the generated forms entirely — always give create (the create form and the import dialog use it; the edit form
falls back to it when edit is missing). Only the fields you list are shown.
See Form Fields & Widgets for detailed form configuration.
Complete Example
export default defineNuxtConfig({
autoAdmin: {
resources: {
users: {
displayName: 'Users',
icon: 'i-heroicons-user-group',
group: 'User Management',
order: 1,
listFields: ['id', 'name', 'email', 'role', 'createdAt'],
hiddenFields: ['password', 'passwordHash'],
},
posts: {
displayName: 'Blog Posts',
icon: 'i-heroicons-document-text',
group: 'Content',
order: 1,
listFields: ['id', 'title', 'authorId', 'status', 'publishedAt'],
formFields: {
create: [
{ name: 'title', widget: 'TextInput', required: true },
{ name: 'slug', widget: 'TextInput', required: true },
{ name: 'excerpt', widget: 'TextareaInput', options: { rows: 3 } },
{ name: 'content', widget: 'TextareaInput', options: { rows: 12 } },
{ name: 'authorId', widget: 'RelationSelect', label: 'Author',
options: { resource: 'users', displayField: 'name' } },
{ name: 'status', widget: 'SelectInput',
options: { enumValues: ['draft', 'published', 'archived'] } },
{ name: 'publishedAt', widget: 'DateTimePicker', options: { showTime: true } },
],
edit: [
{ name: 'title', widget: 'TextInput', required: true },
{ name: 'slug', widget: 'TextInput', readonly: true },
{ name: 'excerpt', widget: 'TextareaInput', options: { rows: 3 } },
{ name: 'content', widget: 'TextareaInput', options: { rows: 12 } },
{ name: 'authorId', widget: 'RelationSelect', label: 'Author',
options: { resource: 'users', displayField: 'name' } },
{ name: 'status', widget: 'SelectInput',
options: { enumValues: ['draft', 'published', 'archived'] } },
{ name: 'publishedAt', widget: 'DateTimePicker', options: { showTime: true } },
// M2M Relations
{
name: 'tags',
label: 'Tags',
widget: 'MultiRelationSelect',
options: {
resource: 'tags',
displayField: 'name',
junctionTable: 'postTags',
junctionLeftKey: 'postId',
junctionRightKey: 'tagId',
},
},
],
},
},
comments: {
displayName: 'Comments',
icon: 'i-heroicons-chat-bubble-left',
group: 'Content',
order: 2,
},
// Hide junction tables
postTags: {
type: 'junction',
},
},
},
})
Auto-Generation
If you don't configure a resource, the admin panel auto-generates everything:
- displayName - Formatted from resource name
- singularName - Derived from displayName
- icon - Default icon
- listFields - Up to six picked columns (see above)
- formFields - All editable columns with appropriate widgets
This works great for prototyping, but custom configuration gives you more control.
Best Practices
- Always hide sensitive fields (passwords, tokens, etc.)
- Use meaningful display names for better UX
- Group related resources for easier navigation
- Set appropriate field orders to match user workflow
- Leave system fields out of forms (id, createdAt, etc. — generated forms already do)
- Configure M2M relations in edit forms only
Next Steps
- Form Fields & Widgets - Detailed form customization
- M2M Relationships - Many-to-many configuration
- Permissions - Resource-level access control
Configuration & Theming
Customize the appearance and behavior of your admin panel.
Form Fields & Widgets
Customize create and edit forms with the admin's nine widgets: TextInput, TextareaInput, NumberInput, CheckboxInput, SelectInput, DateTimePicker, PasswordInput, RelationSelect and MultiRelationSelect. An unknown widget name falls back to TextInput (with a console warning).