https://github.com/unix4ever/imvue
Declarative reactive ImGui bindings inspired by Vue.js
https://github.com/unix4ever/imvue
c-plus-plus dear-imgui lua ui xml
Last synced: 6 months ago
JSON representation
Declarative reactive ImGui bindings inspired by Vue.js
- Host: GitHub
- URL: https://github.com/unix4ever/imvue
- Owner: Unix4ever
- License: mit
- Created: 2019-06-23T21:56:15.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-05-11T17:28:43.000Z (over 5 years ago)
- Last Synced: 2025-03-24T17:11:26.537Z (7 months ago)
- Topics: c-plus-plus, dear-imgui, lua, ui, xml
- Language: C++
- Homepage:
- Size: 1.37 MB
- Stars: 13
- Watchers: 1
- Forks: 6
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ImVue
Declarative reactive ImGui bindings inspired by Vue.js.
Almost no overhead, but relies on stl and c++11.
[](https://travis-ci.org/Unix4ever/imvue)
Simple component template may look like that:
```
Button was clicked {{self.counter}} times.
click me
return ImVue.new({
testing = function(self)
self.counter = self.counter + 1
end,
data = function(self)
return {
counter = 0
}
end
})
```
Despite being similar to Vue.js, this project does not aim to be 100%
compatible with Vue templates.
It's possible to load components in the same way as it's implemented in Vue.js.
You can either define them using `lua` syntax or `imv` xml file.
`imv` files search path is configured using `package.imvpath` variable.
CSS Styles Support
------------------
ImVue supports CSS styling and HTML syntax to some extent.
[Styled document example](samples/simple/styled.xml) in action:
Vue Special Syntax
------------------
### Supported
- `v-if/v-else-if/v-else`.
- `v-for` (does not support int index e.g.: `value, key, index`).
- `v-on`.
- `v-on:(click|mousedown|mouseup|mouseover|mouseout)[.[ctrl|alt|meta|shift|exact]]`.
- `v-on:(keyup|keydown|keypress)[.][]`.
- `v-on:change`.
- Attributes starting with `:` are treated as `v-bind:...`.
- Defining components and using custom tag names. Props validation is
also supported.
- Component `` (limitations: no named slots, no default value,
always using parent context).
- `ref` and `key` fields.
### Not Supported Yet
- Custom events: `v-on:yadda-yadda` & `this.$emit('yadda-yadda')`.
- `sync`.
- Defining events using `@` sign.
- Long definition using `v-bind`.
- Getting `event.target` in event handlers.
- Changing element properties using refs (RO access only).
- `${}` eval syntax in attributes.
- V8 JS integration.
### Lua Implementation Specifics
Each scripted attribute or evaluation is actual Lua code string, thus
there is no limitation on what you can do. Globals are also available.
Besides, it will create reactive listeners for each field that was used in the
evaluation.
Dependencies
------------
- ImGui without any modifications.
- NanoSVG is used for image rendering. Using customized rasterizer.
- RapidXML is used for XML parsing.
- customized version of [LibCSS](https://github.com/Unix4ever/libcss).
Optional Core Dependecies
-------------------------
- Lua 5.1+/LuaJIT 2.0.5+ - adds script interpreter.
Samples Dependencies
--------------------
- SDL2 >= 2.0.5
- libglew
Build
-----
### Simple Build
1. Install dependencies.
1. Run:
`make build`