This project demonstrates how to implement a flexible plugin system in a Vue 3 application using TypeScript and Vite. The system is designed to allow for dynamic integration of commercial plugins into an open source project, extending the functionality of the core application without compromising its open-source integrity.
- Dynamic Plugin Loading: Plugins can be loaded at runtime, allowing for flexible expansion of the application's capabilities.
- Server-side and Client-side Support: The plugin system accommodates both backend and frontend extensions.
- Route-based Plugins: Easily add new pages or sections to the application through plugins.
- Clear Separation: Maintains a clear distinction between the open-source core and commercial plugins.
- Server-side Plugins: Extend backend functionality
- Client-side Plugins:
- Functionality Plugins: Add new features or modify existing ones
- Route-based Plugins: Add new pages or sections to the application
Each plugin consists of:
- A manifest file (
manifest.json
) describing the plugin's properties and requirements - Client-side code (for UI and frontend logic)
- Server-side code (for backend functionality, if applicable)
The core Client and Server are the open-source pieces and do not contain any proprietary code or placeholders for commercial plugins. They provide the foundational functionality of your app.
To create a new plugin:
- Create a new directory in the
plugins
folder - Create a
manifest.json
file describing your plugin - Implement the necessary client-side and/or server-side code
- Use the plugin loader API to register your plugin with the core application
- Clone the repository
- Install dependencies:
npm install
- Run the development server:
npm run dev
- To include plugins, use the appropriate build command (e.g.,
npm run build:with-plugins
)
We welcome contributions to the core application and open-source plugins. Please read our CONTRIBUTING.md
file for guidelines on how to submit contributions.
This Dynamic Plugin System is licensed under the MIT License. See the LICENSE
file for more details.