Skip to content

Commit 1e2854d

Browse files
committed
📝 How to register a widget.
1 parent 020e0ba commit 1e2854d

File tree

1 file changed

+5
-23
lines changed

1 file changed

+5
-23
lines changed

docs/development-guides.md

Lines changed: 5 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -426,34 +426,16 @@ For examples of finished widget components, see the [Widgets](https://github.com
426426

427427
### Step 3 - Register
428428

429-
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:
430-
431-
Import your widget file
432-
433-
```javascript
434-
import ExampleWidget from '@/components/Widgets/ExampleWidget.vue';
435-
```
436-
437-
Then register the component
429+
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:
438430

439431
```javascript
440-
components: {
432+
const COMPAT = {
441433
...
442-
ExampleWidget,
443-
},
434+
'example-widget': 'ExampleWidget',
435+
};
444436
```
445437

446-
Finally, add the markup to render it. The only attribute you need to change here is, setting `widgetType === 'example'` to your widget's name.
447-
448-
```vue
449-
<ExampleWidget
450-
v-else-if="widgetType === 'example'"
451-
:options="widgetOptions"
452-
@loading="setLoaderState"
453-
@error="handleError"
454-
:ref="widgetRef"
455-
/>
456-
```
438+
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.
457439

458440
### Step 4 - Docs
459441

0 commit comments

Comments
 (0)