B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano


As of 02 FEB 2021, this project is is no longer maintained as it has given birth to BVAD3.

This project was a joy to create, however like everything that has a start and an end, its time to move on and evolve. BVAD3 is faster, more simpler to implement and takes advantage of the Abstract Designer use.

Subscribe to Telegram Channel

[BANanoVuetifyAD] Vuetify WebSites & WebApps with BANano for Dummies



UPDATE 24 October 2020: The recommended methodology to create BANanoVuetify WebApp is being discussed here:
MealPrep. This covers most of what VueJS + Vuetify is all about in terms of the internals.

Whilst you can use the designer to create your UX, you need to separate your concerns when creating the app just like its done on the MealPrep by using components and routers for the pages.



BANanoVuetifyAD - Prelease Playlist on Youtube
BANanoVueMaterial (Vuetify) Playlist on Youtube

2020-05-20 Update: Important Update

BANanoVueMaterial Designer Usage - Mock.Compile.Publish

BANanoVueMaterialCore (pure vuetify without extensions)

Exploring Components & Router Basics

How to ask questions, request help, report bugs and request enhancements + Telegram Channel

Thanks to everyone who has been playing with this and highlighting issues and requesting features. You are stars!

*** IMPORTANT: Migrating to the new version

Word. Moving from VueMaterial to Vuetify was inevitable and whilst both are Vue Material based frameworks, Vuetify has more strengths. If if was going to be possible, we would not be having a migration guide, however things changed and enhancements happened and some code rewrites took place. When doing the transition from the VueMaterial to Vuetify codebases, we tried to make the code transition to be as smooth as possible, thus our migration guide is as small as possible. We did not want to dictate how to use the lib, so we removed some things that were hard coded and fixed. This was specific to the side drawer. To test the migration, the old examples were converted to new examples (see below) and all of them work.

BANanoVueMaterial is complete open source, so this means you can use it to your hearts content and adjust it and make it your own. If you enhance, send us word, we will merge. Make the code simple and comment it as much as you can. I cannot over-emphasize that Vuetify is LARGE, so check their website on how components are created and used to learn stuff. Do enjoy. TheMash. #IAmLovingThis

BANanoVuetify (recommended for new projects & migration notes attached)

You can track our progress from here. All the components that we got from VueMaterial exists in Vuetify and more!!!

  • Copy all the files in the 1. External Libraries folder to your B4J external libraries folder
  • If you want to explore the BANanoVuetify source code, open and run the project in 2. Library
  • If you want to explore all the components in this version, open and run the project in 3. Demo
  • You can also explore other specific examples from the 4. Examples folder
Live Preview

Tutorials (New)


NB: Download and Import the Project Components files for the Expense Tracker here.

1. Expense Tracker with BANanoSQL

Expense Tracker Part 1
Expense Tracker Part 2
Expense Tracker Part 3
Expense Tracker Part 4
Preparations for Part 5
Expense Tracker Part 5.1
Expense Tracker Part 5.2

2. Expense Tracker with SQLite (you need to understand all of 1. Expense Tracker with BANanoSQL first!)

Making your app use SQLite as a backend
Mock.Compile.Publish Expense Tracker with SQLite as BackEnd Full Implementation

3. Expenses Tracker with MSSQL (you need to understand all of 1. & 2. above first!)

Mock.Compile.Publish Expense Tracker with MSSQL as BackEnd

4. Expense Tracker with MySQL (you need to understand all of 1. - 3. above first)

Mock.Compile.Publish Expense Tracker with MySQL as BackEnd

NEW NEW NEW!!!! Handling Events

Developing a grid with the Designer
Developing forms with the Designer
Designing text field controls with the Designer
Designing text area controls with the Designer
Designing password controls with the Designer
Designing images with the Designer
Designing file input with the Designer
Designing buttons with the Designer
Designing checkboxes with the Designer
Designing switches with the Designer
Designing icons with Designer
Designing labels with Designer
Designing sliders with the Designer
Designing select, combo and autocomplete with the Designer
Designing radio boxes with the Designer
Designing date & time pickers with the Designer (NB: functionality works on your app)
Designing a parallax with the Designer
Designing a container with the Designer
Designing the appbar, toolbars and systembar with the Designer - Part 1
Designing the appbar, toolbars and systembar with the Designer - Part 2
Drag n Drop Menu - Part 1
Drag n Drop Menu - Part 2
Drag n Drop Carousel
Drag n Drop Dialog
Drag n Drop Rating
Drag n Drop SpeedDial
DataTable multi selects
Invisible File Selector
DataTable GetItemKeys
Drag n Drop Chips
Drag n Drop Badges
Drag n Drop Avatars
Exporting Component Schemas (Multi Development Mode)
Importing Component Schemas (Multi Development Mode)
Drag n Drop Lists
Drag n Drop Tabs
Drag n Drop Stepper
Drag n Drop ExpansionPanels (Accordion)
Drag n Drop Page
Setting Project Properties
Reading Text files (without upload to server)
Reading Excel files (without upload to server)

Reporting (New)

Excel Client Side Reporting with OXML

Example Projects

Hello World
Navigation (1 or more pages using v-show directive)
Login Screen
User Registration Screen
Expenses.Show - MySQL+PHP+ChartKick CRUD
Form Utilities - BANanoSQL CRUD
Calculations - using watch directives

IMPORTANT: Asking Questions about BANanoVueMaterial

1. Please do not ask questions on this thread as this is about updates and new developments about BANanoVueMaterial.
2. When asking a question, please use the B4J Forum and prefix your question with [BANanoVueMaterial] Your Question
3. As the author of this lib, I would recommend that in the content of your question you also address it to myself with @Mashiane (this will also help me find and attend to your questions faster as it will show in my personal notifications)

Related Content

BANanoVue - a now updated CORE of BANanoVueMaterial
BANanoWired - a mockup framework build on BANanoVue (WIP)
BANanoPDFDesign - a creation based on BANanoVueMaterial for PDF reporting (WIP)
BANanoVMDesign - this intends to support BANanoVueMaterial design philosophy. (WIP)

Have fun and enjoy!

PS: BANanoVueMaterial uses an updated version of the BANanoPostProcessor library done by Kiffi.
Last edited:


Licensed User
Longtime User
Upcoming Changes 4.10

Validation - TextField (Email, Telephone, Number, Password, Date Picker, Time Picker, Text Area, File Inputs, Select, Combo, Auto Complete)

The validation methodology for BANanoVuetify has been updated. This is dependent on ensuring that your components are not static. ie.


= vm.NewTextField(Me, True,


= vm.NewTextField(Me, False,

This is now default with the designer.



Licensed User
Longtime User
Upcoming Updates: 4.11 Extensions (These are separate libraries)

Drag n Drop File Select

This demo shows how one can drag and drop a file select on the stage. A file select is an invisible file input control that can be activated by a click of another component like a button. One can use a file select to read files without uploading them to the server. Eg. Read Text Files, Read Excel files.



Licensed User
Longtime User
Upcoming Updates 4.11 Margins & Padding

At times the space between components is large. This can be decreased by setting .HideDetails and also adding margin and padding classes to the components. This in essence will make the space between components smaller, i.e. row after another.

By setting the mx (vertical) and my (horizontal) margins and px and py, one can decrease or increase these values.

For each components we have added extra property bag properties for margins and padding.


Upcoming Updates 4.11 Floats

Most components have an additional property on the property bag to adjust the float.


Setting these places the elements on the positions needed.


FavIcon Update

Its important that your app gets some proper icons etc.

This tool can help in converting a png to favicon.

You can then use the icons on your header with..

BANano.Header.AddFavicon("favicon-16x16.png", "16x16")
    BANano.Header.AddAppleTouchIcon("apple-touch-icon.png", "180x180")
    'BANano.Header.AddMSTileIcon("mstile-150x150.png", "144x144")
    BANano.Header.AddManifestIcon("android-chrome-192x192.png", "192x192")
    BANano.Header.AddManifestIcon("android-chrome-512x512.png", "512x512")

Thus we have updated the template1 example to include these icons.


Licensed User
Longtime User
Upcoming Updates 4.11 VueJS LifeCycle Hooks.

We have added functionality to trap and one be able to execute code when the vue js instance life cycle hooks run. This has been added to pgIndex.Init


The VueJS life cycle can be explained with this diagram.

For example, one could select records from a db or create a db on the Created callback.


'life cycle hooks
    vm.SetBeforeCreate(Me, "BeforeCreate")
    vm.SetCreated(Me, "Created")
    vm.SetBeforeMount(Me, "BeforeMount")
    vm.SetMounted(Me, "Mounted")
    vm.SetBeforeUpdate(Me, "BeforeUpdate")
    vm.SetUpdated(Me, "Updated")
    vm.SetBeforeDestroy(Me, "BeforeDestroy")
    vm.SetDestroyed(Me, "Destroyed")

Then one needs to add the call back events applicable.

Sub Destroyed
    Log(vm.DateTimeNow & " App Destroyed")
End Sub

Sub BeforeDestroy
    Log(vm.DateTimeNow & " App BeforeDestroy")
End Sub

Sub Updated
    Log(vm.DateTimeNow & " App Updated")
End Sub

Sub BeforeUpdate
    Log(vm.DateTimeNow & " App BeforeUpdate")
End Sub

Sub BeforeMount
    Log(vm.DateTimeNow & " App BeforeMount")
End Sub

Sub BeforeCreate
    Log(vm.DateTimeNow & " App BeforeCreate")
End Sub

'when the #el is mounted
Sub Mounted
    Log(vm.DateTimeNow & " App Mounted!")
End Sub

'when the instance is created
Sub Created
    Log(vm.datetimenow & " App Created!")
End Sub
Last edited:


Licensed User
Longtime User
appears as soon as your page fires
As I described in the other post, this is only partial true as it will first load and parse all css/javascript files before showing the loader if you do it this way. When I run your solution, the first 4 seconds (on high-speed internet, 30 seconds on fast 3G) nothing is shown. Only with the DOMContentLoaded parameter which will be introduced in BANano v5, you will be able to show a loader as soon as the html is parsed.


Licensed User
Longtime User
the first 4 seconds (on high-speed internet, 30 seconds on fast 3G) nothing is shown.
Thanks again, we have noted this and we patiently await BANano V5, which we hope will come soon.

In other news, I made a test outside the BANanoCoreVue, with a pure BANano App, as indicated here, there was not even a delay when loading (no css or js was added on headers though)

For now the purpose of "perceived speed" is partially defeated. We smile at progress!
Last edited:


Licensed User
Longtime User
Upcoming Updates: 4.12

A new look of the interface. We wanted more space on the stage so we moved stuff around.


1. The property bag has been moved to a side drawer, it now sits on the left.
2. The project properties have been moved to the left


3. We have 43 components on the designer as indicated by the badge.
4. The next badge indicates the number of components on the stage.
5. We moved the avatar logo to the right.


6. From the project you can now specify database connection details. This will extract your database schema so that you can automatically generate a data-table from it. This helps with speeding development based on the data / backend first approach. For now this ONLY supports MySQL. One can just migrate their DB to MySQL and use this important part of the builder.

ToDataTable Functionality


The way this works is simple.

a) specify the database and connectivity details (MySQL ONLY)
b) connect to the database (this extracts the schema) & displays it on the treeview.
c) select the tables and fields you want to be "ToDataTable"
d) click the green gears to execute the process and see your generated datatable on the stage. You can then update the data-table properties as you need to be able to generate dialogs for data entry and other things.
e) exit the ToDataTable

7. Added a treeview to the layout components. This is a renderless component.

To activate the toolbox, you click the 3rd left button on the navbar, this will have the number of components e.g. 43.


8. My Components

The list of components that you draw on the stage is now accessible by clicking the 4th left button in the navbar. We have used a side nav for this as it has a scrollbar and one can scroll without moving the "iMac" etc. To activate a component, just select it from the list and its property bag will activate automatically.

Last edited:


Licensed User
Longtime User
c) select the tables and fields you want to be "ToDataTable"
d) click the green gears to execute the process and see your generated datatable on the stage. You can then update the data-table properties as you need to be able to generate dialogs for data entry and other things.

* once we click the green gear to execute the process , is it possible to add or update the fields from table to ToDataTable later on.


Licensed User
Longtime User
as on today we are been performing CRUD operation on Single Table, it is possible in near future to create form like Order Form were we need to save the data into multiple table for the single form. and reporting tool. it will be complete framework/package.


Licensed User
Longtime User
once we click the green gear to execute the process , is it possible to add or update the fields from table to ToDataTable later on.
This is a one way process, when the fields are available in the DataTable component, you can update them anyway you want just like in the Mock.Compile.Publish Expense Tracker videos posted on that thread.
Last edited: