Configuration

/**
 * Define Nuxt configuration with TypeScript support
 * @param config - The configuration object
 * @returns The same configuration object with proper typing
 */
function defineNuxtConfig(config: NuxtConfig): NuxtConfig;

interface NuxtConfig {
  // Application
  ssr?: boolean;
  target?: "static" | "server";
  mode?: "universal" | "spa";
  modern?: boolean | "client" | "server";
  
  // Directory structure
  rootDir?: string;
  srcDir?: string;
  buildDir?: string;
  
  // Modules and plugins
  modules?: (string | [string, any] | ModuleOptions)[];
  buildModules?: (string | [string, any] | ModuleOptions)[];
  plugins?: (string | PluginOptions)[];
  
  // Styling
  css?: string[];
  
  // Runtime configuration
  runtimeConfig?: RuntimeConfig;
  publicRuntimeConfig?: Record<string, any>;
  privateRuntimeConfig?: Record<string, any>;
  
  // Head configuration
  head?: MetaObject;
  
  // Router configuration
  router?: RouterConfig;
  
  // Build configuration
  build?: BuildConfig;
  
  // Server configuration
  server?: ServerConfig;
  
  // Development configuration
  dev?: boolean;
  debug?: boolean;
  
  // Hooks
  hooks?: NuxtHooks;
  
  // Watchers
  watch?: string[];
  watchers?: {
    webpack?: any;
    chokidar?: any;
  };
  
  // Auto-imports
  imports?: ImportsOptions;
  
  // Components
  components?: ComponentsOptions;
  
  // Layouts
  layouts?: Record<string, string>;
  
  // Error page
  ErrorPage?: string;
  
  // Loading configuration
  loading?: LoadingConfig | string | false;
  loadingIndicator?: LoadingIndicatorConfig | string | false;
  
  // Transition configuration
  pageTransition?: TransitionConfig | string | false;
  layoutTransition?: TransitionConfig | string | false;
  
  // Generate configuration (for static generation)
  generate?: GenerateConfig;
  
  // Experimental features
  experimental?: ExperimentalConfig;
  
  [key: string]: any;
}

interface RuntimeConfig {
  [key: string]: any;
  public?: {
    [key: string]: any;
  };
}

interface ModuleOptions {
  src: string;
  options?: any;
  mode?: "client" | "server" | "all";
}

interface PluginOptions {
  src: string;
  mode?: "client" | "server" | "all";
  ssr?: boolean;
}

// nuxt.config.ts
import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  // Basic configuration
  ssr: true,
  target: "server",
  
  // Modules
  modules: [
    "@nuxtjs/tailwindcss",
    "@nuxtjs/color-mode",
    ["@nuxtjs/google-fonts", {
      families: {
        Inter: [400, 500, 600, 700]
      }
    }]
  ],
  
  // Styling
  css: [
    "~/assets/css/main.css"
  ],
  
  // Runtime configuration
  runtimeConfig: {
    // Private keys (available only on server-side)
    apiSecret: process.env.API_SECRET,
    
    // Public keys (exposed to client-side)
    public: {
      apiBase: process.env.API_BASE || "/api",
      appName: "My Nuxt App"
    }
  },
  
  // Head configuration
  head: {
    title: "My Nuxt App",
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "My amazing Nuxt application" }
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" }
    ]
  }
});

// nuxt.config.ts
import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  // Server configuration
  server: {
    port: 3000,
    host: "0.0.0.0"
  },
  
  // Router configuration
  router: {
    base: "/my-app/",
    middleware: ["auth"],
    extendRoutes(routes, resolve) {
      routes.push({
        name: "custom",
        path: "/custom",
        component: resolve(__dirname, "pages/custom.vue")
      });
    }
  },
  
  // Build configuration
  build: {
    transpile: ["@my-org/my-package"],
    extend(config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/
        });
      }
    }
  },
  
  // Components auto-discovery
  components: [
    "~/components",
    { path: "~/components/ui", prefix: "ui" }
  ],
  
  // Auto-imports
  imports: {
    dirs: [
      "composables/**",
      "utils/**"
    ]
  },
  
  // Development tools
  devtools: { enabled: true },
  
  // Experimental features
  experimental: {
    payloadExtraction: false,
    typedPages: true
  }
});

// nuxt.config.ts
import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  // Environment-specific settings
  ...(process.env.NODE_ENV === "production" && {
    ssr: true,
    nitro: {
      minify: true,
      compressPublicAssets: true
    }
  }),
  
  ...(process.env.NODE_ENV === "development" && {
    devtools: { enabled: true },
    debug: true
  }),
  
  // Runtime config with environment variables
  runtimeConfig: {
    // Server-only
    databaseUrl: process.env.DATABASE_URL,
    jwtSecret: process.env.JWT_SECRET,
    
    // Public (client + server)
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || "/api",
      appVersion: process.env.npm_package_version || "1.0.0",
      gtag: {
        id: process.env.GOOGLE_ANALYTICS_ID
      }
    }
  },
  
  // Conditional modules
  modules: [
    "@nuxtjs/tailwindcss",
    ...(process.env.ANALYZE === "true" ? ["@nuxtjs/bundle-analyzer"] : [])
  ]
});

// nuxt.config.ts
import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  // TypeScript configuration
  typescript: {
    strict: true,
    typeCheck: true
  },
  
  // Vite configuration for TypeScript
  vite: {
    vue: {
      script: {
        defineModel: true,
        propsDestructure: true
      }
    }
  },
  
  // Auto-imports with TypeScript
  imports: {
    autoImport: true,
    presets: [
      {
        from: "vue-i18n",
        imports: ["useI18n"]
      }
    ]
  }
});

// nuxt.config.ts
import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  modules: [
    // Simple module
    "@nuxtjs/tailwindcss",
    
    // Module with inline options
    ["@nuxtjs/google-fonts", {
      families: {
        Inter: [400, 500, 600, 700],
        "Fira Code": [400, 500]
      },
      display: "swap"
    }],
    
    // Local module
    "~/modules/my-module",
    
    // Conditional module
    ...(process.env.NODE_ENV === "development" ? ["@nuxtjs/eslint-module"] : [])
  ],
  
  // Module-specific configuration
  tailwindcss: {
    configPath: "~/config/tailwind.config.js",
    exposeConfig: true
  },
  
  colorMode: {
    preference: "system",
    fallback: "light",
    hid: "nuxt-color-mode-script",
    globalName: "__NUXT_COLOR_MODE__",
    componentName: "ColorScheme",
    classPrefix: "",
    classSuffix: "-mode",
    storageKey: "nuxt-color-mode"
  }
});

interface BuildConfig {
  analyze?: boolean | any;
  extractCSS?: boolean | any;
  optimizeCSS?: boolean | any;
  splitChunks?: {
    layouts?: boolean;
    pages?: boolean;
    commons?: boolean;
  };
  transpile?: (string | RegExp)[];
  extend?: (config: any, ctx: BuildContext) => void;
  babel?: any;
  postcss?: any;
  html?: any;
  publicPath?: string;
  filenames?: any;
  loaders?: any;
  plugins?: any[];
  terser?: any;
  hardSource?: boolean;
  parallel?: boolean;
  cache?: boolean;
  standalone?: boolean;
}

interface ServerConfig {
  port?: number;
  host?: string;
  https?: boolean | any;
  socket?: string;
  timing?: boolean | any;
}

interface RouterConfig {
  base?: string;
  mode?: "hash" | "history";
  linkActiveClass?: string;
  linkExactActiveClass?: string;
  linkPrefetchedClass?: string;
  middleware?: string | string[];
  extendRoutes?: (routes: any[], resolve: any) => void;
  scrollBehavior?: (to: any, from: any, savedPosition: any) => any;
  parseQuery?: (query: string) => any;
  stringifyQuery?: (query: any) => string;
  fallback?: boolean;
  prefetchLinks?: boolean;
  prefetchPayloads?: boolean;
  trailingSlash?: boolean;
}

interface LoadingConfig {
  color?: string;
  failedColor?: string;
  height?: string;
  throttle?: number;
  duration?: number;
  continuous?: boolean;
  rtl?: boolean;
}

interface TransitionConfig {
  name?: string;
  mode?: "in-out" | "out-in";
  css?: boolean;
  duration?: number | { enter: number; leave: number };
  type?: "transition" | "animation";
  enterClass?: string;
  enterToClass?: string;
  enterActiveClass?: string;
  leaveClass?: string;
  leaveToClass?: string;
  leaveActiveClass?: string;
  beforeEnter?: (el: Element) => void;
  enter?: (el: Element, done: () => void) => void;
  afterEnter?: (el: Element) => void;
  enterCancelled?: (el: Element) => void;
  beforeLeave?: (el: Element) => void;
  leave?: (el: Element, done: () => void) => void;
  afterLeave?: (el: Element) => void;
  leaveCancelled?: (el: Element) => void;
}

interface GenerateConfig {
  dir?: string;
  routes?: string[] | ((routes: string[]) => string[] | Promise<string[]>);
  exclude?: (string | RegExp)[];
  concurrency?: number;
  interval?: number;
  subFolders?: boolean;
  fallback?: boolean | string;
}

interface ExperimentalConfig {
  payloadExtraction?: boolean;
  typedPages?: boolean;
  watcher?: string;
  configSchema?: boolean;
  treeshakeClientOnly?: boolean;
  emitRouteChunkError?: "reload" | "manual";
  restoreState?: boolean;
}

interface BuildContext {
  isClient: boolean;
  isServer: boolean;
  isDev: boolean;
  isStatic: boolean;
  target: string;
  loaders: any;
}