About this Page

The With Vue page demonstrates using Vue.js and some dynamic metadata to enhance the client-side of an existing application.

This page uses the same dynamic metadata & integrates it with a host application using plain AJAX & bootstrap The host page (this page) mocked here is vanilla HTML/javascript/jQuery/Bootstrap.

To the host page the following items are added:
a) Divs (plain divs, cards, panels, tabs, whatever) identified by specific Ids;
b) A link to the Larbins.js file;
c) The page imports the Larbins.js page (as a module) to allow communication with Larbins.js.

Larbins.js is responsible for reading the metadata & painting additional controls & containers (cards, tabs etc) on the page. This metadata can be hard-wired in the code or read from a database. The host page has access to the Larbins data structures allowing validate/read/write/insert operations.

So where is all the Vue.js stuff now? A (non-development) administration infrastructure can be provided to allow users to do the following:
a) Manage the metadata to add database columns & assign columns to positions on the host page.
b) Use the Data Administration function to allow administrative users to access the raw data.

See here for a demo of some of this functionality.

Notes
As at 22/3/2021 for the purposes of this demo data & metadata are mocked. No actual database is accessed.