Installation
Install the module
pnpm add @treygrr/nuxt-better-auth-ui
It depends on @nuxt/ui and @nuxtjs/better-auth, and
installs them for you through Nuxt's module dependencies. Your app still needs its own Better Auth config
(server/auth.config.ts, app/auth.config.ts).
Add it to nuxt.config.ts
export default defineNuxtConfig({
modules: ['@treygrr/nuxt-better-auth-ui']
})
Install the icon sets
The pages use these icons, and Nuxt Icon looks for them in your app's dependencies:
pnpm add @iconify-json/lucide @iconify-json/simple-icons
Point Tailwind at the module
Tailwind doesn't scan node_modules, so add the module's pages to your main CSS file:
@import 'tailwindcss';
@import '@nuxt/ui';
@source "../../../node_modules/@treygrr/nuxt-better-auth-ui/dist/runtime";
The path is relative to the CSS file; adjust it if yours isn't at app/assets/css/main.css.
Run Better Auth's migrations
The Admin plugin adds role, banned, banReason and banExpires to the user table, and impersonatedBy to
sessions; other features add their own tables. Run Better Auth's migrations after installing, and again after turning
on a feature, the same way you apply your other Better Auth migrations.
Your first admin
Nobody has the admin role at first. Set it once in your database, for example with SQLite:
update user set role = 'admin' where email = 'you@example.com';
After that, admins can grant the role from the dashboard.