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
Was fortunate enough to get the drawer to work with drill-down. To be included in the next iteration.

Example code..

'build the nav drawer
Sub BuildNavDrawer
    '*copy code after this line
    vm.Drawer.AddParentChild("", "warehouse", "mdi-warehouse", "", "Warehouse", "")
    vm.Drawer.AddParentChild("warehouse", "pageReceipts", "", "", "W/H Receipt", "")
    vm.Drawer.AddParentChild("", "masters", "mdi-cog-outline", "", "Configuration", "")
    vm.Drawer.AddParentChild("masters", "pageAgents", "", "", "Agents / Brokers", "")
    vm.Drawer.AddParentChild("masters", "pageCustomers", "", "", "Customers", "")
    vm.Drawer.AddParentChild("masters", "pageGodowns", "", "", "Godowns", "")
    vm.Drawer.AddParentChild("masters", "pageInsuranceProviders", "", "", "Insurance Providers", "")
    vm.Drawer.AddParentChild("masters", "pageInsurancePolicies", "", "", "Insurance Policies", "")
    vm.Drawer.AddParentChild("masters", "pageSubLocation1s", "", "", "Godown Sub Location1", "")
    vm.Drawer.AddParentChild("masters", "pageLocations", "", "", "Godown Sub Location2", "")
    vm.Drawer.AddParentChild("masters", "pageWarehouseLicenses", "", "", "Warehouse Licence", "")
    vm.Drawer.AddParentChild("masters", "pageProducts", "", "", "Products", "")
End Sub

If this method is used, the draweritems_click events needs to be changed also.

'*IMPORTANT when a drawer item is clicked
Sub draweritems_click(elID As Object)
    'get the id from the event
    'Dim elID As String = vm.GetIDFromEvent(e)
    Select Case elID....

The important point here is the commenting out / removal of

Dim elID As String = vm.GetIDFromEvent(e)

And the varaible passed to the click event is no longer (e As BANanoEvent) but (elID as Object)

Last edited:


New Member
Licensed User
Longtime User
I have configure this nice framework,
I'm trying to run the demo, Everything compile fine but in the browser I got and Error

Uncaught SyntaxError: await is only valid in async function
app.js:1 Uncaught ReferenceError: banano_bananovuetifycore_bananoshared is not defined
at app.js:1

I'm using wamp server as my PHP server
last version of Banano and BananoVue




Licensed User
Longtime User
Vuetify Core 4.26 Now available.


NB: There is a known bug with the SpeedDial and this is being attended to as its not working anymore.

On the Demo we have set the background image for the NavBar and Drawer. This is done with...





Licensed User
Longtime User
Important Facts: The VMPrism component has been updated to enable one to copy code & download it. This is due to now having 2 buttons.

This is using vue-clipboard2 to enable one to copy code to the clipboard. Once copied, the code can be pasted anywhere from the clipboard.

We tested this with showing one of the alerts code.


How have we done this.

1. We created a method to create the prism component on the modAlerts page.

CreateVBCode("a1code", "Alert", $"vm.CreateAlert("a1", Me, "success").SetContent("I'm a success alert.").Show.AddToContainer(cont, 1, 1)"$).AddToContainer(cont, 1, 1)

This expects 2 methods, a1codecopy_click(e as bananoevent) and a1codedownload_click(e as bananoevent)

These are based on the prism component id.

We then add the events, passing them the prism component identifier.

Sub a1codecopy_click(e As BANanoEvent)
End Sub

Sub a1codedownload_click(e As BANanoEvent)
    vue.DownloadCode("a1code", "a1code.txt")
End Sub

The code to create the component is as easy as:

Sub CreateVBCode(codeID As String, sTitle As String, scode As String) As VMPrism
    Dim pri As VMPrism
    pri.Initialize(vue, codeID, Me)
    Return pri
End Sub


Licensed User
Longtime User
Just realized that creating the documentation is going to be a loooong process. It looks fancy though as one can refer and then copy the source code for their apps. One has to do it.

Let me fire some b4j then do some copy and paste and code generation to copy back to the demo. The code is there, I just need to put it to the prism component. Jah neh!


Licensed User
Longtime User
Upcoming Updates: Data-Table Totals & Navigation Changes


We want to sum the calories column. We define this in the data-table definition.
We also register this method. If the method will be called multiple times, it just needs to be registered once with .SetMethod.

Step 1

dt1.SetColumnTotal("calories", "sumfield('calories')")
    'register the method
    vue.SetMethod(Me, "sumfield")

The sumfield method will be called passing to it the name of the column. NB: This is case sensitive, colum names are lower case.

Step 2

We define the method that should be called. This gets the list of records, loops through each one and then sums the details

'sum any column passed
Sub sumfield(fld As String) As String
    'get all the records
    Dim totSum As Int = 0
    Dim recs As List = dt1.GetData
    For Each rec As Map In recs
        Dim fldNum As String = rec.get(fld)
        totSum = totSum + BANano.parseInt(fldNum)
    totSum = vue.makemoney(totSum)
    Return totSum
End Sub

We have also changed the pagination. This is done by just adding this call to the data-table definition, for example


#Coming soon


Licensed User
Longtime User
Upcoming Changes:

1. Vuetify updated to 2.3.9.
2. Add a clear sort for data-table. If you have clicked on the header of the data-table, stuff sorts and if you have multi-sorted headers, you can sort on multiple-columns. Thing is, the sort order never cleares when you reload the data. A clear sort button has been added to the data-table. To activate this, add this to your definition. This example we are using the dtschema vmdatatable, we add a divider, then the clear sort button and then a column chooser.


To demonstrate this, see when we click the 'R' and 'C' column and then clear the sort.

DataTable Clear Sort.gif

This is also activated when executed .SetDataSource(?)

3. The column chooser is now activated by clicking the button and no longer on hover.