Frontend-plugins:-widgets.md

+# Frontend plugins
+
+## Widgets
+
+You may include dashboard widget components for your plugins. They must reside in the `widgets` folder in your plugin.
+
+The naming of your wallpaper components can be anything you want. There's no guidelines on the naming schemes besides being CamelCase, but it's recommended to include at least your plugin name and append `Widget`. This ensures there won't be any naming conflicts with other plugins.
+
+The structure would look like this:
+
+```bash
+.
+├── plugins
+│   └── WeatherPlugin
+│       └── widgets
+│           └── WeatherWidget.vue
+```
+
+A Widget component must specify the following data in its default export object:
+
+* `widget`
+
+Example code:
+
+```javascript
+export default {
+    name: 'WeatherWidget', // must match the filename
+    widget: {
+        description: 'Weather widget',
+        icon: 'wb_sunny'
+    },
+    // ... other VueJS code
+}
+```
+
+Omitting these data points will cause the Widget to not show up in the "Dashboard" system settings page, therefor the user will not be able to use it.
+
+## Dashboard widget templating
+
+We would like to streamline the styling of Widgets on the dashboard. You can use `BaseDashboardComponent` to in your Widget component to use the default styling. The use of this component is as follows:
+
+```html
+<base-dashboard-component
+    icon="wb_sunny"
+    title="10 C - Sunny"
+    description="It's sunny in Scheemda">
+</base-dashboard-component>
+
+<script type="text/javascript">
+import BaseDashboardComponent from '../../../application/templates/BaseDashboardWidget.vue'
+
+export default {
+    components: { BaseDashboardComponent }
+}
+</script>
+```
+
+You are not required to use this templating component, but it's highly recommended.
+