Vue.js

This chapter is about Vue.js, 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 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:

• src/vue-components: contains all Vue.js single-file components (.vue files)
• index.html: contains the HTML for the main Vue wrapper component consisting of the navigation sidebar and a placeholder for the currently show view
• src/js/vue/mainVue.js: Javascript part for the main Vue component in index.html
• src/js/vue/vuePluginManager.js: defines custom Vue directives and filters that can be used globally, e.g. a translate filter.

Component structure

The main Vue wrapper component is defined in index.html and mainVue.js. 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() is used in order to change the currently shown view. This method is primarily used by router.js which chooses the correct view based on the current URL hash 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.

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 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 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:
  • aboutView.vue: view containing general information about AsTeRICS Grid
  • addOfflineView.vue: see Offline users
  • allGridsView.vue: see Manage grids view
  • dictionariesView.vue: see Manage dictionaries view
  • gridEditView.vue: see Edit view
  • gridView.vue: see Main view
  • loginView.vue: see Change user view
  • registerView.vue: see Online users
  • welcomeView.vue: see

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

← Previous Chapter Next Chapter →

Back to Overview