#What is a Plugin?

A plugin can be seen as code that is meant to work with the Rebar Framework.

#Where are plugins stored?

Plugins can be found in the src/plugins directory, and each plugin should have a unique folder name.

#Example Plugin Structure

This plugin structure is used purely as a full featured plugin.

├───main │ ├───client │ ├───server │ ├───shared │ └───translate └───plugins └───your-plugin ├───dependencies.json (alt: package.json) ├───client │ └───index.ts ├───fonts │ ├───arial.otf │ └───inter.ttf ├───images │ ├───somelogo.png │ └───bg.jpg ├───rmlui │ └───index.html (yes this actually html) │ └───font.ttf ├───server │ └───index.ts ├───sounds │ ├───alert_a.ogg │ └───alert_b.ogg ├───translate │ └───index.ts └───webview └───MyCustomPage.vue

See plugin structure for more information.

#Example Shared Vue Components / Composables Plugin

It is recommended to prefix your plugin with ui when it's components and composables

├───main │ ├───client │ ├───server │ ├───shared │ └───translate └───plugins └───ui-your-plugin └───UiInput.vue └───UiButton.vue

#Disabling Plugins

If you wish to disable a plugin simply add a ! before the folder name.

Alternatively you can add a file named .disable to the plugin folder to disable it.

#Adding Dependencies

If you noticed a plugin can use npm packages for the webview or server.

Simply add a dependencies.json or package.json to your plugin folder.

Add a section called dependencies and it will automatically install the dependencies the next time you run your server.

{ "dependencies": { "@formkit/auto-animate": "latest" } }