@filo-cms/plugin-kit

Author Filo CMS plugins as publishable Nuxt modules. A plugin can register permissions, content types, page-builder section types, its own API routes and admin panel pages — all reconciled into the CMS database on boot and manageable from the admin UI.

Install

npm install @filo-cms/plugin-kit

Writing a plugin

// my-plugin/src/module.ts
import { defineCmsPlugin, definePluginManifest } from "@filo-cms/plugin-kit";

export default defineCmsPlugin({
  url: import.meta.url,
  manifest: definePluginManifest({
    key: "my-plugin",
    name: "My plugin",
    version: "1.0.0",
    permissions: [{ key: "my.action", label: "My action", group: "my-plugin" }],
    contentTypes: [/* ContentTypeDefinition[] */],
    sectionTypes: [/* page-builder sections */],
    adminNav: [{ label: "My page", icon: "i-lucide-star", path: "index" }],
  }),
});

Directory conventions (all optional — wired up only if present):

| Directory | Effect | |---|---| | src/runtime/server/api/... | Nitro API routes (e.g. /api/v1/my-plugin/...) | | src/runtime/app/components/ | auto-registered Vue components, prefixed with the plugin key | | src/runtime/app/pages/admin/[...pathMatch].vue | admin panel pages under /admin/plugins/<key>/* |

Using a plugin

In a Filo CMS project (scaffolded with create-filo-cms) add the module:

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ["@filo-cms/cms"],
  modules: ["my-plugin"],        // npm package or a local ./modules/my-plugin
});

On boot the manifest is synced into the database (permissions appear in the roles UI, content types in the content manager, sections in the page builder) and the plugin can be enabled/disabled from the admin panel.

Local project extensions work exactly the same way — put the module in modules/ inside your project instead of publishing it.

Links

• Filo CMS repository & documentation
• Reference plugin: plugins/ecommerce
• License: MIT