Skip to main content

​
Configuration Guide

Panduan lengkap untuk mengkonfigurasi MStore Dashboard termasuk Nuxt config, environment variables, dan module settings.

​
Nuxt Configuration

File konfigurasi utama adalah nuxt.config.ts: 
// nuxt.config.ts
import { defineNuxtConfig } from "nuxt/config";
import VueInspector from 'vite-plugin-vue-inspector'

const isProd = process.env.NODE_ENV === 'production'

export default defineNuxtConfig({
  compatibilityDate: '2024-12-01',
  devtools: { enabled: !isProd },
  debug: !isProd,
  sourcemap: !isProd,

  modules: ['@nuxt/ui', '@nuxtjs/i18n', '@pinia/nuxt'],

  // ... other configurations
})

​
Modules Configuration

​
Nuxt UI

// nuxt.config.ts
export default defineNuxtConfig({
  ui: {
    theme: {
      colors: [
        'primary',
        'secondary',
        'tertiary',
        'info',
        'success',
        'warning',
        'error',
        'neutral'
      ]
    }
  }
})
Color Mapping:
Semantic ColorUsage
primaryMain brand color, CTAs
secondarySecondary actions
tertiaryTertiary elements
infoInformational messages
successSuccess states
warningWarning messages
errorError states
neutralText, backgrounds

​
Internationalization (i18n)

// nuxt.config.ts
export default defineNuxtConfig({
  i18n: {
    locales: [
      { code: 'en', name: 'English', file: 'en.json' },
      { code: 'id', name: 'Bahasa Indonesia', file: 'id.json' },
      { code: 'ja', iso: 'ja-JP', name: '日本語', file: 'ja.json' }
    ],
    defaultLocale: 'id',
    strategy: 'no_prefix',      // No URL prefix for locales
    detectBrowserLanguage: false, // Disable auto-detection
    restructureDir: '.',
    langDir: 'locales',
    lazy: true                  // Lazy load translations
  }
})
Locale Files Structure: 
locales/
├── en.json     # English translations
├── id.json     # Indonesian translations
└── ja.json     # Japanese translations

​
Pinia (State Management)

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
  // Pinia is auto-configured by the module
})
Untuk persistence, konfigurasi dilakukan di store level: 
// features/01_core/store/auth.ts
export const useAuthStore = defineStore('auth', () => {
  // store implementation
}, {
  persist: true  // Enable persistence
})

​
Color Mode

// nuxt.config.ts
export default defineNuxtConfig({
  colorMode: {
    preference: 'light',      // Default preference
    fallback: 'light',        // Fallback if no preference
    classSuffix: '',          // Class suffix for body
    storageKey: 'nuxt-color-mode'  // LocalStorage key
  }
})

​
Icon Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  icon: {
    provider: 'iconify',
    serverBundle: 'auto'
  }
})
Available Icon Sets:
  • heroicons - Hero Icons
  • lucide - Lucide Icons
Usage: 
<UIcon name="i-heroicons-home" />
<UIcon name="i-lucide-settings" />

​
CSS Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  css: [
    '~/assets/css/main.css',
    'handsontable/styles/handsontable.css',
    'handsontable/styles/ht-theme-main.css',
    'handsontable/styles/ht-theme-horizon.css',
    'handsontable/styles/ht-theme-classic.css'
  ]
})

​
TailwindCSS

TailwindCSS dikonfigurasi melalui Nuxt UI. Customize di assets/css/main.css: 
/* assets/css/main.css */
@import "tailwindcss";

/* Custom styles */
:root {
  --color-primary: #035478;
}

​
Development Server

// nuxt.config.ts
export default defineNuxtConfig({
  devServer: {
    port: 4001,
    host: '0.0.0.0'  // Allow external access
  }
})

​
Vite Plugins

// nuxt.config.ts
import VueInspector from 'vite-plugin-vue-inspector'

export default defineNuxtConfig({
  vite: {
    plugins: [
      VueInspector({
        enabled: !isProd,
        toggleButtonVisibility: 'always',
        launchEditor: 'code',  // VS Code
      }),
    ],
  }
})

​
Environment Variables

​
Runtime Config

Untuk environment variables yang bisa diakses di client dan server: 
// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // Private keys (server-only)
    apiSecret: process.env.API_SECRET,

    // Public keys (exposed to client)
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE_URL || 'http://localhost:3002'
    }
  }
})

​
.env File

# .env

# API Configuration
NUXT_PUBLIC_API_BASE_URL=http://localhost:3002

# Private (server-only)
API_SECRET=your-secret-key

# Node Environment
NODE_ENV=development

​
Using Runtime Config

// In composables or components
const config = useRuntimeConfig()

// Access public config
const apiBase = config.public.apiBase

// Access private config (server-only)
const secret = config.apiSecret  // Only available in server

​
App Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      title: 'Mstore Dashboard',
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { name: 'description', content: 'Backoffice dashboard untuk Mushola Store' }
      ]
    }
  }
})

​
Nitro Configuration

Untuk API proxy ke backend (jika diperlukan): 
// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/api/**': {
        proxy: 'http://localhost:3002/api/**',
      },
    },
  }
})

​
TypeScript Configuration

// tsconfig.json
{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

​
Environment-Specific Config

​
Development

// nuxt.config.ts
const isProd = process.env.NODE_ENV === 'production'

export default defineNuxtConfig({
  devtools: { enabled: !isProd },
  debug: !isProd,
  sourcemap: !isProd,
})

​
Production Build

# Build for production
NODE_ENV=production pnpm build

# Preview production build
NODE_ENV=production pnpm preview

​
Configuration Best Practices

  • Jangan commit file .env ke repository
  • Gunakan runtimeConfig untuk sensitive data
  • Private keys hanya di server-side
  • Validate environment variables saat startup
  • Enable lazy loading untuk i18n
  • Disable sourcemap di production
  • Use serverBundle: ‘auto’ untuk icons
  • Minimize CSS imports
  • Enable devtools dan debug di development
  • Use Vue Inspector untuk component inspection
  • Configure hot reload properly
  • Set up proper TypeScript strict mode

​
Next Steps

DDD Architecture

Memahami struktur Domain-Driven Design

State Management

Konfigurasi dan penggunaan Pinia