# Vue.js

This chapter is about Vue.js (opens new window), the single-page application framework used for AsTeRICS Grid.

  1. General
  2. Component structure
  3. Used components

Back to Overview

# General

In AsTeRICS Grid Vue.js (opens new window) is used in order to manage views and it’s elements in components and to create all kinds of interactivity in the UI. In Vue.js components can be organized in single .vue files, containing the HTML, Javascript and CSS needed for this component. These are the files and folders that are important regarding the usage of Vue.js:

# Component structure

The main Vue wrapper component is defined in index.html (opens new window) and mainVue.js (opens new window). This line in index.html is a placeholder for the currently shown view of the application:

<component v-if="component" v-bind:is="component" v-bind="properties" :key="componentKey"></component>

The method MainVue.setViewComponent() (opens new window) is used in order to change the currently shown view. This method is primarily used by router.js (opens new window) which chooses the correct view based on the current URL hash (opens new window) in the address. For instance https://grid.asterics.eu/#grids has the hash #grids and therefore will render the manage grids component which is defined in file allGridsView.vue (opens new window).

Figure 1 highlights the Vue.js components that are used for the main view:

Fig. 1: Vue component structure of the main view, red part is replaced depending on the current navigation

# Used components

The used Vue components can be found in the folder src/vue-components (opens new window) which contains the following folders:

  • components: generic components that can be used in various places across the application:
    • comparisonComponent.vue: accordion component showing a comparison between online and offline users (information only)
    • headerIcon.vue: component used in the header of different views which shows a hamburger menu and the AsTeRICS Grid logo
  • modals: contains all kinds of modals (popup dialogs):
    • addMultipleModal.vue: modal for importing multiple new grid elements at once, used in edit view
    • editActionsModal.vue: action edit modal for a grid element, see chapter Actions chapter in user documentation. The file editAREAction.vue (opens new window) is a sub-component of this modal containing the configuration of an AsTeRICS action.
    • editGridModal.vue: edit modal for a grid element (label and image), see chapter Grid appearance and layout in user documentation
    • importDictionaryModal.vue: modal for importing new words to a dictionary, see chapter Dictionaries in user documentation
    • inputOptionsModal.vue: modal for setting input options like e.g. scanning, see chapter Input Options in user documentation
  • views: contains different views which are rendered into the component placeholder described in component structure:

For general information about the structure and usage of Vue.js components, see the official documentation, for instance Component Basics (opens new window).

← Previous Chapter Next Chapter →

Back to Overview