Configuration

The nooku.config.json file allows you to customize your Nooku project settings. Place this file in your project's root directory to configure directory structures or extend components.

Configuration Structure

{
  "dir": {
    "pages": "pages",
    "layouts": "layouts",
    "components": "components",
    "middleware": "middleware",
    "composables": "composables",
    "utils": "utils",
    "content": "content",
    "plugins": "plugins",
    "public": "public",
    "server": "server",
    "stores": "stores",
    "types": "types"
  },
  "components": []
}

Directory Configuration

The dir property allows you to customize the location of various project directories. All paths should be relative to your project root and should not start with a forward slash (/).

Custom Components

The components array allows you to register custom components that will be available in the Nooku editor. Each component follows this structure:

{
  "components": [
    {
      "meta": {
        "name": "Component Name",
        "description": "Component description",
        "icon": "icon-name",
        "category": "category-name"
      },
      "tagName": "component-tag",
      "props": {
        "propName": {
          "label": "Property Label",
          "description": "Property description",
          "type": "Text",
          "placeholder": "Enter value",
          "required": true
        }
      },
      "slots": ["default", "named-slot"],
      "emits": [
        {
          "name": "event-name",
          "description": "Event description",
          "$schema": "optional-schema"
        }
      ]
    }
  ]
}

Component Properties

Input Structure for Props

Each props object follows the Input structure:

interface Input {
  /** Display label for the input field */
  label: string;

  /** Optional description providing additional details */
  description?: string;

  /** Type of input field */
  type: 
    | 'Text'       // Single-line or multi-line text input
    | 'Number'     // Numeric input field
    | 'Toggle'     // Boolean switch input
    | 'Object'     // Structured object input
    | 'Array'      // List input
    | 'Function'   // Function-based input
    | 'Code'       // Code editor input
    | 'Icon'       // Icon selector input
    | 'Dropdown'   // Predefined selection input
    | 'Conditional'; // Input that depends on a condition

  /** Placeholder text for text-based inputs */
  placeholder?: string;

  /** Whether the input is required */
  required?: boolean; 

  /** Supported value types for this input (defaults to ['string', 'number', 'boolean', 'object', 'array', 'conditional', 'code']) */
  valueTypes?: (
    | "string" 
    | "number" 
    | "boolean" 
    | "object" 
    | "function" 
    | "array" 
    | "code" 
    | "conditional"
  )[];

  /** Whether a text input should be multiline (applies only to 'Text' type) */
  long?: boolean; 

  /** Suggested values for 'Text' and 'Number' inputs */
  suggestions?: (string | { label: string; value: string | number })[];

  /** Available options for 'Dropdown' inputs */
  options?: (string | { label: string; value: string | number })[];

  /** Properties for 'Object' type inputs */
  valueInput?: Input; // Used if `schema` is not provided
  schema?: Record<string, Input>; // Defines the structure of the object

  /** Properties for 'Array' type inputs */
  elementType?: Input; // Defines the type of elements in the array
  maxLength?: number;  // Maximum number of elements allowed

  /** Properties for 'Conditional' type inputs */
  condition?: Input; // Input that defines the condition
  true?: Input;
  false?: Input;
}

Example Configuration

{
  "dir": {
    "pages": "src/pages",
    "components": "src/components",
    "stores": "src/stores"
  },
  "components": [
    {
      "meta": {
        "name": "Custom Button",
        "description": "A customized button component",
        "category": "UI Elements"
      },
      "tagName": "CustomButton",
      "props": {
        "variant": {
          "label": "Button Variant",
          "type": "Dropdown",
          "options": ["primary", "secondary", "outline"]
        }
      },
      "emits": [
        {
          "name": "click",
          "description": "Emitted when button is clicked"
        }
      ]
    }
  ]
}

This example configuration file customizes the project structure and adds a CustomButton component to the Nooku editor.