Vue.js for UI Components Creation

Vue.js is a JavaScript framework that is very convenient for UI components creation in Aitheon Apps Editor.

The editor uses the v2 version of the framework. Discover the native Vue.js tutorial before we go through the sample component content.

Sample Specifics

The sample UI component creates a simple button, that passes on a string type message (The standard button doesn't do this - it works differently).

The sample project, which you can use as a template, contains two components folders: example-button (a UI component sample) and example-uppercase.

The difference in a UI component example - two files that provide the UI element appearance and visual behavior rules: the example-button folder contains a ui sub-folder with an ExampleButton.vue file and a helpers.js file.

The rest of the files - .html and .js - and icons subfolder are the same as in the example-uppercase instance.

ExampleButton.vue

The file with the Vue.js framework content. It is built in the one-file style - see ExampleButton.vue overview below.

This file defines the appearance behavior of the button.

example-button.js

The file contains a specific part for the UI component. (Explore the part after a corresponding note there: '// call this only for UI Component').

ExampleButton.vue overview

The Vue.js framework lets you group your <template>, corresponding <script>, and CSS <style> all together in a single file ending in .vue.

In a template for a UI element component the ExampleButton.vue file follows the one-file style.

You can still separate JavaScript and CSS into separate files if you want, and import them to a .vue like this: <script src="./my-component.js"></script> and <style src="./my-component.css"></style>.

<template>

Contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax.

By setting the lang attribute on the <template> tag, you can use Pug template syntax instead of standard HTML — <template lang="pug">.

In the instance two Vue.js directives are used: v-if - conditional rendering (see the v-if documentation), and v-on - event handling (see the v-on documentation).

v-if directive renders the block if config returns 'true'.

v-on directive calls the widgetChangeHandler method when a click happens. (See the <script> block).

Styles for the widget are defined lower in the <style> block of this file.

<script>

Contains all of the non-display logic of your component. Most importantly, your <script> tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a render() function.

If you want to use TypeScript syntax, you need to set the lang attribute on the <script> tag to signify to the compiler that you're using TypeScript — <script lang="ts">.

In the instance here defined data, methods, watchers, and props (inputs).

import

The first part of this block is the import of two objects from the helpers.js module (1).

from './helpers' will look for a file called helpers.js in the same directory as the file you are requesting the import from. There is no need to add the .js extension. Moreover, when the module file is in the same directory, you can even use the form from 'helpers'.

export default

export default{} (2) is a component object, the .vue files` syntax that makes the following object definition available for use.

data

The data() function (3) describes variables that we can use in the <template>.

methods

Then the methods block. Methods are closely interlinked to events because they are used as event handlers. Every time an event occurs, that method is called.

In the <template> the widgetChangeHandler method (4) is called on click (v-on directive) to emit the value to the application that uses the button component.

Note: we don’t have to use this.data.config, just this.config. Vue does provide a transparent binding for us. Using this.data.config will raise an error.

watch

Watchers are defined in the watch block (5):

Watchers 'spy' on one property of the component state, and run a function when that property value changes.

props

The props block (6) defines variables, that are used in the Vue locally.

<style>

<style> is where you write your CSS for the component. If you add a scoped attribute <style scoped> Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions but allows you to just write plain CSS.

If you select a CSS pre-processor, you can add a lang attribute to the <style> tag so that the contents can be processed by Webpack at build time. For example, <style lang="scss"> will allow you to use SCSS syntax in your styling information.

In the template project, the SCSS syntax is used to define the button's appearance (see CSS Properties Reference). You can have all the CSS in the <style> part of the .vue file, but in the template, this part is imported from a separate styles.scss file:

Widget padding

All the CSS is defined in the button-widget class. If you want the widget field to occupy the entire cell on the dashboard - set width and height to 100%. A user will be able to adjust the widget field in the previewer or on the dashboard. Also, choose the background color.

Button field

Inside the button-widget the button appearance is nested:

Here you can define the button text color, font-size, and others (see CSS Properties Reference).

Note that nested definition is made with underscores and a reference to the nested part of the style definition looks like button-widget__button. See the <template> block.

Cursor and hover

Deeper in nesting:

The first selector defines the cursor appearance over the button (See CSS Selectors Reference).

medium custom property defines minimal height and padding of the button.

contained defines the button`s background-color and the color on hover (again, nested in contained).

Note how to call these nested definitions using the nesting path: button-widget__button--contained. See the <template> block.