How to create components for Strapi plugins

When developing a Strapi plugin, you might want to create reusable components for your plugin. Components in Strapi are reusable data structures that can be used across different content-types.

To create components for your Strapi plugin, you'll need to follow a similar approach to creating content-types, but with some specific differences.

Creating components

You can create components for your plugins in 2 different ways: using the Content-Type Builder (recommended way) or manually.

Using the Content-Type Builder

The recommended way to create components for your plugin is through the Content-Type Builder in the admin panel. The Content-Type Builder documentation provides more details on this process.

Creating components manually

If you prefer to create components manually, you'll need to:

1. Create a component schema in your plugin's structure.
2. Make sure the component is properly registered.

Components for plugins should be placed in the appropriate directory within your plugin structure. You would typically create them within the server part of your plugin (see plugin structure documentation).

For more detailed information about components in Strapi, you can refer to the Model attributes documentation.

Reviewing the component structure

Components in Strapi follow the following format in their definition:

/my-plugin/server/components/category/component-name.json

{
  "attributes": {
    "myComponent": {
      "type": "component",
      "repeatable": true,
      "component": "category.componentName"
    }
  }
}

Making components visible in the admin panel

To ensure your plugin's components are visible in the admin panel, you need to set the appropriate pluginOptions in your component schema:

{
  "kind": "collectionType",
  "collectionName": "my_plugin_components",
  "info": {
    "singularName": "my-plugin-component",
    "pluralName": "my-plugin-components",
    "displayName": "My Plugin Component"
  },
  "pluginOptions": {
    "content-manager": {
      "visible": true
    },
    "content-type-builder": {
      "visible": true
    }
  },
  "attributes": {
    "name": {
      "type": "string"
    }
  }
}

This configuration ensures your components will be visible and editable in both the Content-Type Builder and Content Manager.