Joseph Burkhart 0e9f650e69 A couple of small improvements to the custom vue component example (#4229) 3 mesi fa
..
README.md 0e9f650e69 A couple of small improvements to the custom vue component example (#4229) 3 mesi fa
counter.js 0e9f650e69 A couple of small improvements to the custom vue component example (#4229) 3 mesi fa
counter.py 4c5745b1f9 register components and libraries while subclassing 1 anno fa
main.py 0e9f650e69 A couple of small improvements to the custom vue component example (#4229) 3 mesi fa
on_off.py 0e9f650e69 A couple of small improvements to the custom vue component example (#4229) 3 mesi fa
on_off.vue 0e9f650e69 A couple of small improvements to the custom vue component example (#4229) 3 mesi fa

README.md

Custom Vue Component

This example demonstrates how to create and use custom Vue components in NiceGUI. One component is implemented using JavaScript, the other using Vue's Single-File Component (SFC) syntax.

Counter Component (counter.js)

The Counter component is a simple counter that increments a value. On change, it emits an event with the new value. A reset method allows to reset the counter to 0.

The JavaScript code in counter.js defines the front-end logic of the component using JavaScript.

OnOff Component (on_off.vue)

The OnOff component is a simple toggle that switches between on and off. On change, it emits an event with the new value. A reset method is also provided to reset the toggle to off.

The Single-File Component in on_off.vue defines the front-end logic of the component using Vue 2. In contrast to the JavaScript code in counter.js, it splits the template, script, and style into separate sections.