In the vuet render mode (under /vapps in the OOTB applications) XML Screens normally use a hybrid of client and server rendering. Screens can also be build that are 100% client rendered with a Vue JS component (.js file) and an embedded or separate Vue template (.vuet file).
Here is an example screen definition:
The most important differences from a normal XML Screen are:
Under the screen.widgets element there is a single render-mode element with a text element for type="js" and another for type="vuet" since this has a separate Vue template file. Here are direct links to the .js and .vuet files:
This is a very simple example with an add form and a list of items. The add form demonstrate Vue component data binding and a method to handle the form submit in the browser. The list of items demonstrates iterating over a list that is loaded from the server with an jQuery.ajax() call.
With this approach the screen runs in the context of the WebrootVue root component which handle routing and various other things. As with standard Vue JS that can be referenced in other components using this.$root which is how the .js script in this example gets the exampleId parameter from the currentParameters object in the WebrootVue component.
Vue components used in Moqui vuet templates can also be used, such as the drop-down component used in this example (which supports data binding with the v-model attribute).