npm package: @matibaski/nuxt-supabase-admin
Description: Shared Nuxt admin module for static Supabase-backed sites.
Latest version: 0.3.0

# @matibaski/nuxt-supabase-admin

Shared Nuxt admin module for static Nuxt sites that manage content through Supabase.

It provides a reusable `/admin` area with:

- Supabase auth-based login
- config-driven dashboard, CRUD, and storage pages
- mobile-optimized admin UI
- built-in German/English support
- static-host friendly output via `npm run generate`

## Setup

Install the module in your Nuxt project:

```bash
npm install @matibaski/nuxt-supabase-admin
```

Register it in [`nuxt.config.ts`](./playground/nuxt.config.ts):

```ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/supabase', '@matibaski/nuxt-supabase-admin'],
  adminPanel: {
    configFile: './admin.config.ts',
  },
})
```

Create an `admin.config.ts` file:

```ts
import {
  collection,
  dashboard,
  datetime,
  defineAdminConfig,
  storage,
  text,
  textarea,
} from '@matibaski/nuxt-supabase-admin/config'

export default defineAdminConfig({
  route: '/admin',
  brand: {
    title: 'My Site Admin',
  },
  dashboard: dashboard({
    metrics: ['news'],
  }),
  storage: storage(['news']),
  collections: [
    collection('news', {
      fields: {
        title: text(),
        content: textarea(),
        date: datetime(),
      },
      list: ['title', 'date'],
      orderBy: 'date:asc',
    }),
  ],
})
```

Requirements:

- Nuxt 4
- Supabase configured in the consumer project
- project-specific Supabase schema and auth policies already set up

Notes:

- the module ships its own compiled admin CSS
- consumer projects do not need Tailwind to render the admin UI
- `database.types.ts` is recommended per project for type safety, but not required for runtime
- the default admin route is `/admin`, but you can change it with `route: '/secure'` or `route: '/internal'`

## Optional Public Shortcut

If you want the floating "Open Admin Dashboard" shortcut on the public site, render the built-in
`<AdminFloatingShortcut />` component inside the consumer app's own Nuxt tree, for example in `app.vue`
or your public layout:

```vue
<template>
  <NuxtLayout>
    <NuxtPage />
    <AdminFloatingShortcut />
  </NuxtLayout>
</template>
```

This is intentionally opt-in. The module no longer mounts the shortcut globally from a plugin, because
that approach can interfere with routing in consuming apps.

## Development

Local development in this repository:

```bash
npm install
npm run dev
```

Useful commands:

```bash
npm run build:css
npm run typecheck
npm run build
```

The `playground/` app is the local integration target for module development.

## Contributing

Contributions are welcome, especially around:

- config API improvements
- additional field types and relation helpers
- accessibility and mobile UX
- Supabase workflow hardening
- docs, examples, and migration guides

Start here:

- [CONTRIBUTING.md](./CONTRIBUTING.md)
- [SECURITY.md](./SECURITY.md)
- [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md)

For larger API changes, open an issue or draft proposal first. This module is still evolving, and config-surface changes should stay deliberate.

## License

This project is licensed under the MIT License.

See [LICENSE.md](./LICENSE.md).