Desktop apps with Vue NodeGui
Shubham Zanwar
Agenda1. What is NodeGui? 🤔 2. NodeGui demo 😲 3. What is Vue NodeGui? 💚 4. Vue NodeGui demo 🚀 5. Features 🌸 6. Internals 🔩 7. QnA ❗️❓
NodeGui 🔥
A tool to create cross-platform native desktop applications using nodeJS.
https://nodegui.org
Layout support with
facebook/yoga
Styling support with
css-like Qt stylesheets
NodeGui demo 😁
Let's create a window 🖼
First meaningful app: Counter 🔄
Familiar? 😲
NodeGui
DOM
Vue NodeGui 💚
A library to create cross-platform native desktop applications using VueJS.
Vue3 renderer that combines with nodegui widgets
So what?
😏
🤩
- Render truly native desktop widgets while using a very familiar API
- Create layouts and style components; again, while using a familiar API
- Be CPU and Memory efficient
- Leverage all the advantages of the existing JS ecosystem - Debugging, bundling, etc
- Have a declarative approach to building applications
Vue NodeGui demo 🚀
Back to basics: counter 🔄
Vue NodeGui :: Styling 💅
Vue NodeGui :: Events 🚨
Vue NodeGui :: Debugging 🐞
For debugging, you can use any standard solution for debugging nodeJS applications
- Chrome inspecter
- VS Code Debugger
Coming soon: An integration with Vue dev tools
Vue NodeGui :: Hot-reloading 🍕
- Possible thanks to webpack
Uses the HotModuleReplacementPlugin() from webpack4
Vue NodeGui :: Documentation 📚
Internals 🔩
NodeGui
APIs
QPushButton
QWidget
QLabel
Custom Vue3 renderer
vn-button
vn-view
vn-text
NodeGui internals 🔩
JS Code that you write
NodeJS runtime (qode)
NodeGui
NodeGui plugins
Qt5 libraries
Thank you!
Links
