Desktop apps with Vue NodeGui

Shubham Zanwar @VueConfTO

@szanwar22

Creator of vue-nodegui

Agenda

1. What is NodeGui? 🤔
2. NodeGui demo 😲
3. What is Vue NodeGui? 💚
4. Vue NodeGui demo 🚀
5. QnA and bye-bye👋🏽

Layout support with
facebook/yoga

Styling support with
css-like Qt stylesheets

NodeGui 🔥

https://nodegui.org

*All apps are still JS in runtime. No transpiling to C++ here 🤫

NodeGui demo 😁

https://github.com/nodegui/nodegui-starter

Create a window

Create a widget(div)

Create a button

event handler

add button and widget to window

Familiar? 😲

NodeGui

DOM

Vue NodeGui 💚

A library to create cross-platform native desktop applications using VueJS.

Vue3 renderer that combines with nodegui widgets

https://vue.nodegui.org

Vue NodeGui demo 🚀

https://github.com/nodegui/vue-nodegui-starter

Vue3 setup API

Widgets used in templates

Vue NodeGui :: Styling 💅

flex layout with yoga

Pseudo selectors

Adding ids for styles

styleSheet prop

Vue NodeGui :: Events 🚨

create event handler

Attach event handler

Just use models 💁🏻‍♂️

Vue NodeGui :: Documentation 📚

https://vue.nodegui.org

Thank you!

Links

@szanwar22

shubhamzanwar

@node_gui

@nodegui/vue-nodegui

By Shubham Zanwar

More from Shubham Zanwar