This chapter is about Vue.js, the single-page application framework used for AsTeRICS Grid.
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
- src/vue-components: contains all Vue.js single-file components (
- 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/vuePluginManager.js: defines custom Vue directives and filters that can be used globally, e.g. a translate filter.
# Component structure
<component v-if="component" v-bind:is="component" v-bind="properties" :key="componentKey"></component>
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.