Native desktop applications using Vue.js.

Related tags

vue desktop libui vuido
Overview

Vuido

Create native desktop applications for Windows, OS X and Linux using Vue.js.

NPM module MIT License

Introduction

Vuido is a framework for creating native desktop applications based on Vue.js. Application using Vuido can run on Windows, OS X and Linux, using native GUI components, and don't require Electron.

Under the hood, Vuido uses the libui library which provides native GUI components for each desktop platform, and the libui-node bindings for Node.js.

Documentation

You can find the full documentation of Vuido at vuido.mimec.org.

Acknowledgements

Vuido is largely based on Vue.js and shares most of its code, except for the platform specific code related to libui.

Vuido was inspired by Proton Native, an environment for creating native desktop applications using React.

License

Vuido is licensed under the MIT license

Copyright (C) 2018 Michał Męciński

Issues
  • Percentage of Vue-Specific Code?

    Percentage of Vue-Specific Code?

    Cool project. We've been looking into doing something similar for the Aurelia framework. I'm wondering, how much of this work is Vue-specific, vs. how much is re-usable in a way that could benefit other frameworks with a templating language? I think this could be an interesting project to work together on, in a cross-framework way. I'd love to hear your thoughts.

    opened by EisenbergEffect 17
  • How to create desktop app?

    How to create desktop app?

    Hi, I'm looking for info about creating desktop apps (windows exe/osx app) Is this not working yet?

    opened by monkeysuffrage 17
  • Awesome project

    Awesome project

    Hi, libui-node author here. I'm writing just to say hi and compliment for this awesome project. Feel free to /CC me if you get problem related to the native part of the project, I'll try to help as I can...

    👋🏻

    opened by parro-it 12
  • Add new widgets

    Add new widgets

    vuido control gallery

    • [x] Group container
    • [x] Checkbox
    • [x] ColorButton
    • [x] DatePicker
    • [x] TimePicker
    • [x] DateTimePicker
    • [x] FontButton
    • [x] Separator
    • [x] ProgressBar
    • [x] RadioButtons
    • [x] Slider
    • [x] Tabs

    Note: libui-node don't have events for DatePicker, TimePicker and DateTimePicker

    opened by XpycT 6
  • Vuido.mimec.org is inaccessible

    Vuido.mimec.org is inaccessible

    Hello, I am a Chinese user and I am open to VPN. I can access your github, but I can't access https://vuido.mimec.org/. I would like to ask if there are other API addresses? Or can I provide a gh-pages?

    opened by txs1992 5
  • Documentation site not accessible

    Documentation site not accessible

    When I go to the documentation site there is some problem with the HTTPS cert or something and the browser flags it as a dangerous site, I can try to bypass it but my corprate VPN's DNS or something flags it and says it is "👻A Malware👻"

    I think it would make more sense to host the documentation on GitHub pages. You would inherit the https automatically, and it would be located at:

    • https://mimecorg.github.io/vuido

    To do this, make a new branch called gh-pages and add a file called .no-jekyll, and then you have a static hosted website for free where people can contribute to the documentation. You could even use VuePress for it if you want, or something else, I don't really care, just throwing out ideas.

    opened by TheJaredWilcurt 5
  • Only update when the mouse moves in front of the window?

    Only update when the mouse moves in front of the window?

    Hello contributors, I have some questions here. Here is my code:

    setInterval(() => {
    console.log('Tick tock')
    }, 1000)
    

    I think it will write on the console every second: tick tock but no, it will only print when i move the mouse in front of the window :( Is it right? However, at some point, I will write:

    setTimeout(() => {
    // do sth
    }, ms)
    

    and it was never triggered until I moved the mouse? @@ Please give me an answer. Thank you.

    opened by vinhjaxt 5
  • Textarea & Progressbar components size

    Textarea & Progressbar components size

    Hi, I've been trying to use vuido for a fun little project and have issues with those 2 components sizes. You can see it here: https://github.com/benavern/coffee-break

    As you can see on screenshots or if you try to run it (I tried on linux & windows) Textarea & Progressbar components are very little. I didn't see anything in the documentation that could help me with this. Are there some attributes or anything else that is not documented that is meant to change the default size?

    Thanks in advance! Benjamin

    opened by benavern 4
  • App closed after Cancel an open file Dialog

    App closed after Cancel an open file Dialog

    I'm trying to run this, but if I hit the Cancel button of the open file dialog I'm getting an error and my app close unexpectedly.

    <template>
      <Window ref="mainWindow">
        <Button @click="selectFile">Browse...</Button>
      </Window>
    </template>
    <script>
    import libui from 'libui-node'
    
    export default {
        methods: {
            selectFile () {
                const window = this.$refs.mainWindow.window
                const filename = libui.UiDialogs.openFile(window)
                if (filename) {
                    console.log(filename)
                }
            }
        }
    }
    </script>
    

    The error is:

    [...]/dist/main.js:120
                const filename = __WEBPACK_IMPORTED_MODULE_0_libui_node___default.a.UiDialogs.openFile(window);
                                                                                              ^
    
    Error: basic_string::_M_construct null not valid
        at VueComponent.selectFile ([...]/dist/main.js:120:91)
        at invoker ([...]/dist/main.js:2589:18)
    
    opened by atilacamurca 3
  • Howto convert an existing web application based on vue

    Howto convert an existing web application based on vue

    Hi, I am evaluating which tool to use to wrap our existing vue-based web application for Windows MacOS and Linux. I came upon vuido and now I am intrigued to use it, because we already use vue for the frontend in our web application project. But I can't find any documentation or example how to use vuido with an existing vue project...

    Can you provide some links / info / examples about this?

    Thanks in advance, Anne

    opened by anh1979 3
  • Error on npm install

    Error on npm install

    npm ERR! command C:\Windows\system32\cmd.exe /d /s /c libui-download && autogypi && npm run build npm ERR! Error: must specify version

    opened by byma1995 0
  • error on new project

    error on new project

    Hey, I just try to create a vuido project and I get this message on npm i call

    13:40 Scorpion ~/sources/ytlight npm i
    npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
    npm WARN deprecated [email protected]: this library is no longer supported
    
    > [email protected] install /home/me/sources/ytlight/node_modules/libui-node
    > libui-download && autogypi && npm run build
    
    Downloaded zip: /home/me/.libui/libui-shared-linux-x64-alpha3.5-master-008.tar.gz
    Libui binaries extracted to: /home/me/sources/ytlight/node_modules/libui-node
    
    > [email protected] build /home/me/sources/ytlight/node_modules/libui-node
    > node-gyp configure build
    
    Traceback (most recent call last):
      File "/usr/share/nodejs/node-gyp/gyp/gyp_main.py", line 6, in <module>
        from pkg_resources import load_entry_point
      File "/usr/lib/python3/dist-packages/pkg_resources/__init__.py", line 3254, in <module>
        def _initialize_master_working_set():
      File "/usr/lib/python3/dist-packages/pkg_resources/__init__.py", line 3237, in _call_aside
        f(*args, **kwargs)
      File "/usr/lib/python3/dist-packages/pkg_resources/__init__.py", line 3266, in _initialize_master_working_set
        working_set = WorkingSet._build_master()
      File "/usr/lib/python3/dist-packages/pkg_resources/__init__.py", line 584, in _build_master
        ws.require(__requires__)
      File "/usr/lib/python3/dist-packages/pkg_resources/__init__.py", line 901, in require
        needed = self.resolve(parse_requirements(requirements))
      File "/usr/lib/python3/dist-packages/pkg_resources/__init__.py", line 787, in resolve
        raise DistributionNotFound(req, requirers)
    pkg_resources.DistributionNotFound: The 'gyp==0.1' distribution was not found and is required by the application
    gyp ERR! configure error 
    gyp ERR! stack Error: `gyp` failed with exit code: 1
    gyp ERR! stack     at ChildProcess.onCpExit (/usr/share/nodejs/node-gyp/lib/configure.js:355:16)
    gyp ERR! stack     at ChildProcess.emit (events.js:198:13)
    gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
    gyp ERR! System Linux 5.4.0-51-generic
    gyp ERR! command "/usr/bin/node" "/usr/bin/node-gyp" "configure" "build"
    gyp ERR! cwd /home/me/sources/ytlight/node_modules/libui-node
    gyp ERR! node -v v10.19.0
    gyp ERR! node-gyp -v v6.1.0
    gyp ERR! not ok 
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] build: `node-gyp configure build`
    npm ERR! Exit status 1
    npm ERR! 
    npm ERR! Failed at the [email protected] build script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    npm WARN Local package.json exists, but node_modules missing, did you mean to install?
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /home/me/.npm/_logs/2020-10-21T11_41_20_689Z-debug.log
    npm WARN [email protected] requires a peer of [email protected]* but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack-chokidar2/node_modules/fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
    
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] install: `libui-download && autogypi && npm run build`
    npm ERR! Exit status 1
    npm ERR! 
    npm ERR! Failed at the [email protected] install script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    

    I did not found anything about this in previous issues. Anyone had this issue before ? There seems to have a broken python installation package. I don't really mind how to start to solve this issue.

    opened by eregnier 0
  • Is this Project Dead?

    Is this Project Dead?

    opened by emjimadhu 4
  • Could not locate bindings for midi-node

    Could not locate bindings for midi-node

    Hello, I was just trying vuido by creating a simple app to control your mouse with midi using midi and robotjs packages. I can build the main.js file with npm run build but when i try to run it (after build) with npm start it shows following error:

    Error: Could not locate the bindings file. Tried:
     → C:\Users\vojtik\projects\midimouse-vuido\build\midi.node
     → C:\Users\vojtik\projects\midimouse-vuido\build\Debug\midi.node
     → C:\Users\vojtik\projects\midimouse-vuido\build\Release\midi.node
     → C:\Users\vojtik\projects\midimouse-vuido\out\Debug\midi.node
     → C:\Users\vojtik\projects\midimouse-vuido\Debug\midi.node
     → C:\Users\vojtik\projects\midimouse-vuido\out\Release\midi.node
     → C:\Users\vojtik\projects\midimouse-vuido\Release\midi.node
     → C:\Users\vojtik\projects\midimouse-vuido\build\default\midi.node
     → C:\Users\vojtik\projects\midimouse-vuido\compiled\10.16.2\win32\x64\midi.node
     → C:\Users\vojtik\projects\midimouse-vuido\addon-build\release\install-root\midi.node
     → C:\Users\vojtik\projects\midimouse-vuido\addon-build\debug\install-root\midi.node
     → C:\Users\vojtik\projects\midimouse-vuido\addon-build\default\install-root\midi.node
     → C:\Users\vojtik\projects\midimouse-vuido\lib\binding\node-v64-win32-x64\midi.node
        at bindings (C:\Users\vojtik\projects\midimouse-vuido\dist\main.js:383:9)
        at Object../node_modules/midi/midi.js (C:\Users\vojtik\projects\midimouse-vuido\dist\main.js:568:86)
        at __webpack_require__ (C:\Users\vojtik\projects\midimouse-vuido\dist\main.js:20:30)
        at Module../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/MainWindow.vue?vue&type=script&lang=js& (C:\Users\vojtik\projects\midimouse-vuido\dist\main.js:159:14)
        at __webpack_require__ (C:\Users\vojtik\projects\midimouse-vuido\dist\main.js:20:30)
        at Module../src/MainWindow.vue?vue&type=script&lang=js& (C:\Users\vojtik\projects\midimouse-vuido\dist\main.js:9182:193)
        at __webpack_require__ (C:\Users\vojtik\projects\midimouse-vuido\dist\main.js:20:30)
        at Module../src/MainWindow.vue (C:\Users\vojtik\projects\midimouse-vuido\dist\main.js:9148:98)
        at __webpack_require__ (C:\Users\vojtik\projects\midimouse-vuido\dist\main.js:20:30)
        at Module../src/main.js (C:\Users\vojtik\projects\midimouse-vuido\dist\main.js:9216:69)
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] start:dev: `node ./dist/main.js`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the [email protected] start:dev script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\vojtik\AppData\Roaming\npm-cache\_logs\2019-11-10T14_08_26_356Z-debug.log
    

    I tried rebuilding all the libraries (midi and robotjs), removing node_modules folder and npm install again, even npm cache clear --force but to no success. I tried the same code with electron and it worked fine so I am not really sure how to work this out with vuido and I am not really sure if vuido is the source of the problem either. Any help would be appreciated. Thanks.

    opened by VojtechKlos 1
  • Can you build a menu in Vuido?

    Can you build a menu in Vuido?

    Hi,

    I'm wondering if it is possible to build some kind of menu system in Vuido?

    Let's say that you would like a drawer and drop-down menus in the header.

    Regards Håkan

    opened by haarse 1
  • Update dependencies

    Update dependencies

    Thanks a lot for this project!

    I updated dependencies:

    • VueJS to 2.6.10
    • Babel to 7 with compatible plugins
    • LTS NodeJS 10 is used as target for babel
    opened by tcastelly 0
  • issues with Area

    issues with Area

    I've run across a number of issues with the and components, which may be libUI issues, but very well may be race conditions in vuido. When is placed inside , it renders inside a 1x1 box, making it appear it has not worked at all.

    Now to further confuse things... in linux (GTK), adding scrollable="false" height="1" appears to make it render at least well enough for my purposes... however, that hacky little fix does not seem to work for windows.

    Code wise, i've pretty much copy pasted the examples... Is there a way we can force a layout update? I'm not sure thats where the issue is, but thats where my suspicions lie.

    opened by dthompso99 0
  • System tray support

    System tray support

    Hi, great project

    Please, can you help me with some issues- how I can add a system tray support to application?

    opened by ruslankonev 1
  • Can't use spread operator.

    Can't use spread operator.

    I can't spread the returning of vuex's mapState/mapMutations/... This code:

    <template>
        <Window title="Vuido Example" width="400" height="100" margined v-on:close="$exit">
            <Box padded>
                <Text>
                    {{ name }}
                </Text>
            </Box>
        </Window>
    </template>
    
    <script>
    import { mapState, mapMutations } from 'vuex'
    
    export default {
        data: () => ({
    
        }),
        computed: {
            ...mapState([
                'name'
            ])
        }
    }
    </script>
    

    Throws following error: ERROR in ./src/MainWindow.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/MainWindow.vue?vue&type=script&lang=js&) Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: Unexpected token (19:8)

    17 | }, 18 | computed: { 19 | ...mapState([ | ^ 20 | 'name' 21 | ]) 22 | }

    opened by Tobi696 1
  • Text alignment

    Text alignment

    I have a basic application working, essentially a block of text (description) followed by a slider, followed by "ok" / "cancel". Can anyone tell me;

    a. How do I centre a text block / how do I insert a centred line of text in a window? b. How to I right justify the contents of a box, so for example how to I get ok/cancel in the bottom right of my window rather than bottom left?

    Positioning control aside, this is looking very interesting / exciting .. ! :)

    opened by oddjobz 0
Releases(v0.2.0)
  • v0.2.0(Aug 20, 2018)

    Features

    • add Area widget and AreaGroup, AreaPath and AreaText elements
    • add $libui property
    • add $start, $exit and $dialogs methods

    Bug fixes

    • fix default attributes of some widgets
    • fix setting the margin for child tabs
    Source code(tar.gz)
    Source code(zip)
  • v0.1.3(Jul 16, 2018)

  • v0.1.2(Jun 5, 2018)

  • v0.1.1(May 29, 2018)

    Features

    • add new widgets: Checkbox, ColorButton, Combobox, DatePicker, DateTimePicker, DropdownList, FormButton, ProgressBar, RadioButtons, Separator, Slider, Spinbox, TextArea, TextInput and TimePicker
    • add new containers: Group and Tab
    • add support for the v-model directive
    • add show event to Window
    Source code(tar.gz)
    Source code(zip)
Owner
Michał Męciński
Technical team lead, software architect and developer. Author of open source projects and indie games.
Michał Męciński
webchat via WebSockets/WebRTC that allows messaging/video call/screen sharing

Live demo: pychat.org, video Table of contents About When should I use pychat How to host pychat Run test docker image Run prod docker image Native se

Andrew 188 Oct 11, 2021
A B/S mode system monitor for linux (demo http://199.247.1.240:2048)

中文说明 sysmon Sysmon is a C/S mode system monitor for Linux distribution. With server side daemon, you can remotely watch usage of your system resources

何培勤 111 Sep 14, 2021
🖥️ Secman Desktop is the desktop client for secman. powered by @scmn-dev.

Secman Desktop ??️ Secman Desktop is the desktop client for secman. secman.dev/download Build & Run First sign up via Secman Signup Website Requiremen

Secman 5 Oct 11, 2021
OSL is a simple shared list web-application based on Node. Typical uses include shopping lists of course, and any other small todo-list that needs to be used collaboratively.

Our Shopping List OSL is a simple shared list application. Typical uses include shopping lists of course, and any other small todo-list that needs to

Anaël Ollier 8 Sep 13, 2021
a simple self-hosted bookmarking app that can import bookmarks from delicious and chrome

bookmarks app a simple self-hosted bookmarking app that can import bookmarks from delicious and chrome Quickstart mkdir -p target/standalone && cd tar

David Yu 122 Oct 9, 2021
A framework written in Vue.js for creating command-line like interfaces in web browsers.

promptie A framework for creating command-line like interfaces in web browsers Promptie gives you useful and convenient API's to simulate a CLI like i

Ali Bardakci 81 Aug 25, 2021
A community managed site for Cardano Catalyst. Aiming to gather resources and serve as an information hub for the community

Project Catalyst ** Under Construction ** A central location for managing and improving Project Catalyst. This site is built using Vuepress How to sta

Project Catalyst 16 Oct 5, 2021
Sync your clipboard across multiple platforms

ClipBroad README | 中文文档 Sync your clipboard across multiple platforms. Download the latest release here. Introduction This tools uses Github private r

null 11 Oct 18, 2021
a hilarious peer to peer drawing game built with vue.js using Ably channels.

a hilarious peer to peer drawing game built with vue.js using Ably channels.

Ably Labs 33 Oct 9, 2021
An open source tinder desktop client built with electron and Vue.js for educational purposes

Flamme An open source cross-platform Tinder desktop client built with Electron and Vue.js for educational purposes. With analytical inspection of dail

Ali Bardakci 130 Sep 17, 2021
Instahelp is a Q&A portal website similar to Quora

Instahelp is a Q&A portal website, it features questions and answers on a wide range of tags/topics The website serves as a platform for users to ask and answer questions, and, through membership and active participation, to vote questions and answers up or down and edit questions and answers in a fashion similar to Quora

Abdallah Hemdan 14 Jul 31, 2021
🚕 Simple automation desktop app to download and organize your receipts from Uber/Lyft. Try out our new Ride Receipts PRO !

Simple automation desktop app to download and organize your receipts from Uber and Lyft. Download To download Ride Receipts or purchase Ride Receipts

Hello Efficiency 138 Oct 8, 2021
Application for registering employee entries with the possibility of generating reports, validating and storing users with minimal effort.

Agile visitors ?? Application for registering employee entries with the possibility of generating reports, validating and storing users with minimal e

Albert E. Hidalgo Taveras 22 May 3, 2021
Free and customizable Pomodoro timer app built with Nuxt.

AnotherPomodoro is a very creatively named Pomodoro timer application running in the browser. It helps you manage your time so that you can spend more time doing work in exchange for time spent on watching videos of cute cats ??

Imre Gera 38 Oct 7, 2021
A mobile first, handwritten, responsive web app for music fans.

neteast-music-vue Deployed link: https://neteast.netlify.com/ It is a mobile first responsive web app for listening music from Neteast cloud platform

Tato 47 Sep 14, 2021
Explore and Share Aerial Data

Explore and Share Aerial Data

DroneDB 4 Sep 21, 2021
Vue.js based REST-ful CRUD system

the project is not supported If you want to contribute to this project please fork from this project or email me to add you to what-crud group Vue CRU

What CRUD! 698 Oct 16, 2021