Actions

Difference between revisions of "VueJS"

From LimeSurvey Manual

(Overview)
(Introduction)
Line 1: Line 1:
 
== Introduction ==
 
== Introduction ==
  
{{Hint|This information is intended for LimeSurvey developers.}}
+
{{Hint|Text=This information is intended for LimeSurvey developers.}}
 
 
 
The admin interface in LimeSurvey 4 has started a conversion to [https://vuejs.org/ VueJS]. VueJS is a reactive framework, like [https://angular.io/ Angular] and [https://reactjs.org/ ReactJS]. Some of the components in LimeSurvey 4 has been back-ported to LimeSurvey 3.
 
The admin interface in LimeSurvey 4 has started a conversion to [https://vuejs.org/ VueJS]. VueJS is a reactive framework, like [https://angular.io/ Angular] and [https://reactjs.org/ ReactJS]. Some of the components in LimeSurvey 4 has been back-ported to LimeSurvey 3.
  

Revision as of 16:48, 7 April 2020

Introduction

Notice.png
 Hint: This information is intended for LimeSurvey developers.

The admin interface in LimeSurvey 4 has started a conversion to VueJS. VueJS is a reactive framework, like Angular and ReactJS. Some of the components in LimeSurvey 4 has been back-ported to LimeSurvey 3.

A reactive JavaScript framework has the potential to create a more fluid user experience by avoiding page reloads.

Documentation

VueJS has extensive documentation online: https://vuejs.org/v2/guide/

Compilation

Vue is compiled to JavaScript. To compile it, you have to install the compile tools.

Install dependencies of a package by running yarn:

$ yarn

Then build both development and production by running

$ yarn build

Events

Vue can use events to communicate between components, for example to react when a button is clicked.

Usage

To emit an event, use

LS.EventBus.$emit("saveButtonCalled", this.button);

To subscribe:

LS.EventBus.$on("saveButtonCalled", (button) => { <do things...> });

And to unsubscribe:

LS.EventBus.$off("saveButtonCalled");

Event list

Event name Argument Description
saveButtonCalled button Fired when save button is clicked

Refactoring

Some refactoring tasks that are scheduled for 2020:

  • Single-root instead of multiple
  • Remove duplicated Ajax calls
  • Remove code duplication
  • Remove pjax
  • Random warnings and errors during compilation
  • Remove compiled code from Github repository

More discussion can be viewed here.