Alkademi Logo
Plugin System

Plugin System

Plugin adalah Nuxt Layer tambahan yang ditempatkan di folder plugins/. Plugin dipakai untuk menambah fitur baru, mengganti core tertentu, atau memperkaya navigasi tanpa mengubah source di cores/.

Plugin System

Plugin adalah Nuxt Layer tambahan yang ditempatkan di folder plugins/. Plugin dipakai untuk menambah fitur baru, mengganti core tertentu, atau memperkaya navigasi tanpa mengubah source di cores/.

Struktur Plugin

plugins/my-plugin/
|-- components/          # Komponen plugin
|-- pages/               # Halaman plugin
|-- server/api/          # Endpoint Nitro plugin, jika dibutuhkan
|-- stores/              # Pinia store plugin, jika dibutuhkan
|-- plugin.config.ts     # Konfigurasi plugin
|-- sidebar.ts           # Optional: provider menu sidebar dinamis
`-- nuxt.config.ts       # Menandai plugin sebagai Nuxt Layer

File yang wajib untuk auto-discovery adalah nuxt.config.ts dan plugin.config.ts.

Konfigurasi Plugin Aktual

Kontrak plugin mengikuti PluginConfig di shared/types/plugin.ts. Field utama yang dipakai saat ini:

  • enabled: menentukan plugin aktif atau tidak.
  • routes: daftar route yang juga menjadi menu sidebar statis.
  • replaces: optional, daftar core id yang akan diganti.

Contoh:

import type { PluginConfig } from '../../shared/types/plugin'

export default {
  enabled: true,
  replaces: ['program'],
  routes: [
    {
      key: 'custom-class',
      path: '/dashboard/custom-class',
      icon: 'i-heroicons-sparkles',
      label: 'Custom Class'
    }
  ]
} satisfies PluginConfig

Project saat ini tidak memakai field name, displayName, version, overrideMode, atau targetCore sebagai kontrak plugin utama.

Routes dan Sidebar

Setiap item di routes harus memiliki:

  • path: URL dashboard.
  • icon: nama icon Nuxt UI/Iconify, misalnya i-heroicons-sparkles.
  • label: teks menu.

Field tambahan yang didukung:

  • key: id stabil untuk merge menu.
  • children: child menu.
  • permission: permission tunggal atau array permission.
  • meta: metadata bebas.

routes dipakai oleh useSidebarMenu() untuk membuat menu statis. Jika plugin butuh menu dinamis, tambahkan sidebar.ts.

Sidebar Dinamis

Plugin dapat menyediakan sidebar.ts yang mengekspor sidebar provider:

import { defineSidebarProvider } from '../../shared/types/menu'

export default defineSidebarProvider(async ({ route }) => {
  if (!route.path.startsWith('/dashboard/custom-class')) {
    return []
  }

  const classes = await $fetch('/api/custom-class/sidebar')

  return [
    {
      key: 'custom-class',
      path: '/dashboard/custom-class',
      icon: 'i-heroicons-sparkles',
      label: 'Custom Class',
      source: 'plugin',
      pluginId: 'custom-class',
      children: classes.map((item) => ({
        key: `custom-class.${item.id}`,
        path: `/dashboard/custom-class/${item.id}`,
        icon: 'i-heroicons-document-text',
        label: item.label,
        source: 'plugin',
        pluginId: 'custom-class'
      }))
    }
  ]
})

Menu dari sidebar.ts akan digabungkan dengan menu statis berdasarkan key atau path.

Pelajari detail replacement di Sistem Override.

Arsitektur: Nuxt Layers

Alkademi LMS Open Source dibangun sebagai modular monolith. Semua fitur tetap berjalan sebagai satu aplikasi Nuxt, tetapi setiap domain fitur dipisah menjadi Nuxt Layer agar lebih mudah dirawat, diganti, atau diperluas.

Sistem Override

Implementasi saat ini memakai dua mekanisme utama: extend lewat route/layer plugin, dan replace core lewat field replaces. Tidak ada field overrideMode yang dibaca oleh source saat ini.

Copyright © 2026