Skip to content

Commit

Permalink
📝 How to register a widget.
Browse files Browse the repository at this point in the history
  • Loading branch information
altearius committed Jun 8, 2023
1 parent 020e0ba commit 1e2854d
Showing 1 changed file with 5 additions and 23 deletions.
28 changes: 5 additions & 23 deletions docs/development-guides.md
Original file line number Diff line number Diff line change
Expand Up @@ -426,34 +426,16 @@ For examples of finished widget components, see the [Widgets](https://github.com

### Step 3 - Register

Next, import and register your new widget, in [`WidgetBase.vue`](https://github.com/Lissy93/dashy/blob/master/src/components/Widgets/WidgetBase.vue). In this file, you'll need to add the following:

Import your widget file

```javascript
import ExampleWidget from '@/components/Widgets/ExampleWidget.vue';
```

Then register the component
Next, register your new widget in [`WidgetBase.vue`](https://github.com/Lissy93/dashy/blob/master/src/components/Widgets/WidgetBase.vue). In this file, you'll need to add the following:

```javascript
components: {
const COMPAT = {
...
ExampleWidget,
},
'example-widget': 'ExampleWidget',
};
```

Finally, add the markup to render it. The only attribute you need to change here is, setting `widgetType === 'example'` to your widget's name.

```vue
<ExampleWidget
v-else-if="widgetType === 'example'"
:options="widgetOptions"
@loading="setLoaderState"
@error="handleError"
:ref="widgetRef"
/>
```
Here, the `example-widget` property name will be used to identify the widget when parsing the `type` property in a configuration file. The `ExampleWidget` string is used to dynamically import the widget, and therefore must match the widget's filename as it exists in the `components/widgets` folder.

### Step 4 - Docs

Expand Down

0 comments on commit 1e2854d

Please sign in to comment.