Panduan Membuat Plugin
Panduan Membuat Plugin
Panduan ini membuat plugin sederhana bernama welcome-banner yang menambahkan halaman dashboard dan item sidebar baru.
Langkah 1: Buat Struktur Folder
mkdir -p plugins/welcome-banner/pages/dashboard/welcome-banner
mkdir -p plugins/welcome-banner/components
Langkah 2: Buat Konfigurasi Layer
Buat plugins/welcome-banner/nuxt.config.ts:
export default defineNuxtConfig({
imports: {
dirs: ['stores']
}
})
imports.dirs bersifat optional. Gunakan jika plugin memiliki folder stores/ atau folder auto-import lain.
Langkah 3: Buat Konfigurasi Plugin
Buat plugins/welcome-banner/plugin.config.ts:
import type { PluginConfig } from '../../shared/types/plugin'
export default {
enabled: true,
routes: [
{
key: 'welcome-banner',
path: '/dashboard/welcome-banner',
icon: 'i-heroicons-megaphone',
label: 'Welcome Banner'
}
]
} satisfies PluginConfig
Field routes menjadi sumber menu sidebar statis. path harus cocok dengan halaman yang Anda buat.
Langkah 4: Buat Halaman Plugin
Buat plugins/welcome-banner/pages/dashboard/welcome-banner/index.vue:
<template>
<main class="space-y-4">
<WelcomeBanner />
</main>
</template>
Langkah 5: Buat Komponen
Buat plugins/welcome-banner/components/WelcomeBanner.vue:
<template>
<section class="rounded-lg border border-primary-200 bg-primary-50 p-6">
<h1 class="text-xl font-semibold text-primary-950">
Selamat Datang di LMS
</h1>
<p class="mt-2 text-primary-700">
Ini adalah halaman dari plugin yang dimuat sebagai Nuxt Layer.
</p>
</section>
</template>
Langkah 6: Tambahkan Sidebar Dinamis (Optional)
Jika plugin perlu menambahkan child menu dari API, buat plugins/welcome-banner/sidebar.ts:
import { defineSidebarProvider } from '../../shared/types/menu'
export default defineSidebarProvider(({ route }) => {
if (!route.path.startsWith('/dashboard/welcome-banner')) {
return []
}
return [
{
key: 'welcome-banner',
path: '/dashboard/welcome-banner',
icon: 'i-heroicons-megaphone',
label: 'Welcome Banner',
source: 'plugin',
pluginId: 'welcome-banner',
children: [
{
key: 'welcome-banner.settings',
path: '/dashboard/welcome-banner/settings',
icon: 'i-heroicons-cog-6-tooth',
label: 'Settings',
source: 'plugin',
pluginId: 'welcome-banner'
}
]
}
]
})
Karena key sama dengan route statis, item ini akan digabung dan child menu akan muncul di bawah menu Welcome Banner.
Mengganti Core
Jika plugin ini ingin mengganti core tertentu, tambahkan replaces:
export default {
enabled: true,
replaces: ['program'],
routes: [
{
key: 'welcome-banner',
path: '/dashboard/welcome-banner',
icon: 'i-heroicons-megaphone',
label: 'Welcome Banner'
}
]
}
Saat aktif, core program tidak akan dimuat oleh auto-discovery.
Verifikasi
Jalankan:
pnpm dev
Buka /dashboard/welcome-banner. Jika enabled: true, plugin akan dimuat sebagai layer dan item sidebar akan muncul dari plugin.config.ts.