@brokenice/nitrogen-types

TypeScript type definitions for Nitrogen admin panel.

This package provides TypeScript definitions for the global window.Nitrogen object, allowing you to use Nitrogen's API in custom components with full IntelliSense support.

Installation

npm install @brokenice/nitrogen-types --save-dev

or with yarn:

yarn add -D @brokenice/nitrogen-types

Configuration

Add the types to your tsconfig.json:

{
  "compilerOptions": {
    "types": ["@brokenice/nitrogen-types/window"]
  }
}

That's it! Now TypeScript will recognize window.Nitrogen with full autocomplete.

Usage

Before (without types):

// ❌ TypeScript error: Property 'Nitrogen' does not exist on type 'Window'
(window as any).Nitrogen.success('Hello!');

After (with types):

// ✅ Works with full IntelliSense!
window.Nitrogen.success('Operation completed!');
window.Nitrogen.error('Something went wrong');
window.Nitrogen.log('Debug message');
window.Nitrogen.can('edit-users');
window.Nitrogen.$emit('custom-event', { data: 'test' });
window.Nitrogen.inertiaVisit('/dashboard');

Vue Component Type Generation

This package includes a script to automatically generate TypeScript definitions for your Vue components.

Configuration

Edit vue-typegen.config.json to specify which components should have global type definitions:

{
  "componentsDir": "../resources/assets/vue/components",
  "outputFile": "./vue-components.d.ts",
  "include": [
    "layout/PageLayout.vue",
    "layout/Sidebar.vue",
    "utils/Boilerplate.vue",
    "metrics/metrics-card.vue"
  ]
}

Generating Types

Run the generator:

cd nitrogen-types
npm run generate

Or with ts-node directly:

npx ts-node generate-vue-types.ts

This will:

• ✨ Parse all listed Vue components
• 🧩 Extract prop definitions (supports @Prop() decorators, Options API, and Composition API)
• 📦 Generate vue-components.d.ts with proper TypeScript types
• 🎯 Enable full IntelliSense for your components

Supported Prop Patterns

The generator supports multiple Vue prop definition styles:

1. @Prop() Decorators (vue-property-decorator):

@Prop({ default: 'card' }) defaultClass!: string;
@Prop({ required: true }) title!: string;

2. Options API:

props: {
  title: { type: String, required: true },
  count: { type: Number, default: 0 }
}

3. Composition API:

defineProps<{
  title: string;
  count?: number;
}>()

License

MIT