Vuido
  • About Vuido
  • Introduction
  • Installation
    • Manual Configuration
    • Production Builds
  • Usage
    • Window Template
    • Script Section
    • Interpolations
    • Computed Properties
    • Conditionals and Loops
    • Handling User Input
    • Managing Windows
    • Displaying Dialogs
    • Custom Components
    • Using libui Classes
    • Common Attributes
  • Packaging
  • Built-in Components
    • Window
    • Containers
      • Box
      • Form
      • Group
      • Tab
    • Widgets
      • Area
        • AreaGroup
        • AreaPath
        • AreaText
      • Button
      • Checkbox
      • ColorButton
      • Combobox
      • DatePicker
      • DateTimePicker
      • DropdownList
      • FontButton
      • ProgressBar
      • RadioButtons
      • Separator
      • Slider
      • Spinbox
      • Text
      • TextArea
      • TextInput
      • TimePicker
Powered by GitBook
On this page
  • Main Script
  • Window Component
  • Running the Application

Usage

PreviousProduction BuildsNextWindow Template

Last updated 6 years ago

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

Main Script

The main script of the application looks like this:

main.js
import Vue from 'vuido'

import MainWindow from './MainWindow'

const window = new Vue( {
  render: h => h( MainWindow )
} );

window.$start();

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.

Window Component

The definition of the MainWindow component looks like this:

MainWindow.vue
<template>
  <Window title="Example" width="400" height="100" margined v-on:close="exit">
    <Box>
      <Text>Welcome to your Vuido application!</Text>
    </Box>
  </Window>
</template>

<script>
export default {
  methods: {
    exit() {
      this.$exit();
    }
  }
}
</script>

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.

Running the Application

You must build your application before running it:

npm run build

Use the following command to run the application:

npm start

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 ).

installation
packaging