Responsive image
russell@russell-clark.it
Pages
With Vue With Ajax

Enhancing an application With Vue.js

About this Page

Vue.js is a fully-featured javascript framework used to build web sites & applications see an example here. Vue.js can also be configured to enhance the client-side of an existing (host) application (as an alternative to using jQuery & Ajax, or as a staged conversion to a fully Vue.js application).

The host page mocked here is vanilla HTML / javascript / jQuery / Bootstrap. Vue is added to the host page as script files:
CDN files: vue, bootstrap-vue, bootstrap-vue-icons, moment & associated CSS.
Local files: vue.js (which creates the Vue instance & locates vue on the page) & the required Vue components, each an individual file, which render HTML controls. If you right-mouse/view source you can see all these.

Section 1 illustrates the Host application
Section 2 illustrates self-contained Vue components added to the main page.
Section 3 illustrates Vue.js using metadata to dynamically add fields to the host page. This metadata can be added at the page level, or read in real-time from a database. In the latter use-case users can interact with this metadata (using a secure separate admin application) & alter/add to these fields & their distribution at run-time.

Responsive image russell@russell-clark.it

1) Host Application

Just some simple javascript / bootstrap to simulate the host application.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Ajax
Fetch


2: Vue

A date formatted with moment: {{demoDate}}

Vue components can be added to the host application as separate files, rendered in the host's index page

3: Host Application + Vue

The blue panels & Column A & Column B belong to the Host application. Everything else (including the white panels) is run-time Vue. Its not the prettiest thing, but it demonstrates the use of Vue Components.
The metadata for the panel below holds 2 columns: Personnel.Name & Personnel.Age (a select). In this case Age is an embedded select. But the metadata can be configured to look up a live database table. The Vue component also creates the panel.

The data has been split into Host (Column A & B) and Vue (everything else). The Submit buttons emit messages showing that both sets of data are available to both Host & Vue.

Submit Vue