Usage
Last updated
Last updated
When you create a basic Vuido application using vue-cli (see ), it contains two files in the source directory:
main.js - the main script executed when the application is started
MainWindow.vue - the main window component
The main script of the application looks like this:
In line 2 you can see that the Vuido module is imported as Vue
. This is because Vuido can be used just like the standard Vue.js API.
The application starts by creating a root Vue instance in lines 5-7. Each root instance represents a single window of the application. The window is defined in a separate component, so the root instance only requires a render function which delegates the rendering to that component.
The window is created and displayed on the screen by calling $start()
. This method also starts the main loop of the application, so the window remains visible and responds to user input.
The definition of the MainWindow component looks like this:
If you are familiar with Vue.js, you will notice that this is a regular single-file component. It consists of a template, which defines the layout of the window and its properties, and a script which defines the behavior of the window.
In this simple example, the window contains only a single static line of text. When the window is closed by the user, the main loop is stopped and the application exits.
If you haven't used Vue.js before, don't worry. The syntax of the window template and the contents of the script section are explained in details in the following chapters of this documentation.
You must build your application before running it:
Use the following command to run the application:
This command will create a new script in the dist/
directory of your application. This script can be run directly using Node.js, or packaged for distribution using LaunchUI (see ).