Share My Creation [BANanoVuetifyAD3] New Awesome Kitchen Sink WebApp


Welcome to the New Awesome Kitchen Sink for BVAD3. BVAD3 helps one to create WebApps/Webistes using Material Design based on BANano+Vuetify+B4X.

Anyone who wants to, can now create WebApps/Websites with the full power of the Abstract Designer.

All the components are custom view based and have events just like normal B4x programming. We have broken down each component to have its own individuality so that its easy for you to code websites/websites, with the existing knowledge and skillset you have in create B4X apps.

Drag and Drop a custom view to your abstract designer, generate members, load the layout, bind the components to the page, run your app and you are good to go.


Please note the following:

1. You need a webserver to create BANano Apps, I am using laragon for development (very easy to setup)
2. At the moment, this has not been tested with jetty i.e. BANanoServer (watch this space)

Running the Awesome Kitchen Sink

You can download an already running version here, copy and open the files from your web-server.

Compiling the Kitchen Sink WebApp yourself.

1. You will need these external libraries. Download and copy them to your External B4J Libraries folder.
2. Download the Awesome Kitchen Sink Source code and compile and run yourself. Remember to update the file to point to your ServerIP

There are a few components to finalize. In the mean time would appreciate your comments from your test-drive. Join us here, to send your feedback.

Last edited:


Licensed User
Longtime User
BANanoVuetifyAD3 7.34 Maintenance Update

Below are some of the stuff in the What's New Section

Using CDN
  • You can use CDN resources. In the library on Main > Process Globals > Online = True. This ensures jsDelivr is used for all the CSS & JS Files in the library. To use locally hosted resources in your final App, you can set this to False.
Using / Not Using PlugIns
  • You can turn off libraries that you wont use and can just get the Core CSS / JS Files you need.
Library Options:
Sub Process_Globals
    Private BANano As BANano 'ignore
    Public Version As String = "7.34"
    Public AppName As String = "BANAnoVuetifyAD3"
    'use debug vue.js
    Public CoreFunctionality As Boolean = False
    Public UseDebug As Boolean = False
    'Use online version of vue/vuetify & others
    Public Online As Boolean = True
    Public UsePrismCodeDisplay As Boolean = True
    Public UseGoogleMaps As Boolean = True
    'ajax calls usix axios
    Public UseAxios As Boolean = True
    ' (an option to fetch)
    Public UseQRCode As Boolean = True
    Public UseQRCodeReader As Boolean = True
    Public UseBarcodeReader As Boolean = True
    ' (export vuetable to pdf)
    Public UsePDF As Boolean = True
    '(export vuetable to excel)
    Public UseExcel As Boolean = True
    Public UseChartKick As Boolean = True
    Public UseFireBase As Boolean = True
    Public UseLeafLetMaps As Boolean = True
    Public UseBlurring As Boolean = True
    Public UseHTMLEditor As Boolean = True
    ' (chat box)
    Public UseBeautifulChat As Boolean = True
    ' (install offline first db)
    Public UsePouchDB As Boolean = True
    Public UseEncryption As Boolean = True
    Public UseKanBan As Boolean = True
    Public UseAnimeCSS As Boolean = True
    Public UseLottie As Boolean = True
    Public UseAnimeJS As Boolean = True
    Public UseWebCam As Boolean = True
    Public UseFlowy As Boolean = True
    Public UseDynamicForms As Boolean = True
    Public UseTranslate As Boolean = True
    'export & import csv
    Public UseImportCSV As Boolean = True
    Public UseFluidMeter As Boolean = True
    Public UseGauge As Boolean = True
    Public UseKMLToGeoJSON As Boolean = True
    'Public UseApexCharts As Boolean = False
    'Public UseCircularFluidMeter As Boolean = False
    'Public UseShowDown As Boolean = True
    'sanitize data from HTML editor
    'Public UseDOMPurify As Boolean = True
    'show markdown/html from markdown
    'Public UseMarkDown As Boolean = True
    Public UseCompositionAPI As Boolean = False
    Public UseBarCode As Boolean = True
    Public UseSignaturePad As Boolean = True
    'Public UsePageFlip As Boolean = True
    Public UseBottomNavigation As Boolean = True
    Public UseBrowserPrint As Boolean = True
End Sub

If an option is set to false, the CSS & JS files applicable to that component will not be part of your App. These settings are all turned to True as they are showcased in the Kitchen Sink. For example, if your app will not use the UseQRCodeReader , you can just set it to False.

Using Core Functionality (without PlugIns)

You can just use the Core Vuetify functionality without PlugIns. You do this by setting CoreFunctionality = True. This is what it does

If CoreFunctionality Then
         UsePrismCodeDisplay = False
         UseGoogleMaps = False
         UseAxios = False
         UseQRCode = False
         UseQRCodeReader = False
         UseBarcodeReader = False
         UsePDF = False
         UseExcel = False
         UseChartKick = False
         UseFireBase = False
         UseLeafLetMaps = False
         UseBlurring = False
         UseHTMLEditor = False
         UseBeautifulChat = False
         UsePouchDB = False
         UseEncryption = False
         UseKanBan = False
         UseAnimeCSS = False
         UseLottie = False
         UseAnimeJS = False
         UseWebCam = False
         UseFlowy = False
         UseDynamicForms = False
         UseTranslate = False
         UseImportCSV = False
         UseFluidMeter = False
         UseGauge = False
         UseKMLToGeoJSON = False
         UseCompositionAPI = False
         UseBarCode = False
         UseSignaturePad = False
         UseBottomNavigation = False
         UseBrowserPrint = False
    End If
    'UseImportCSV = True
    'UseEncryption = True
    'UsePDF = True
    'UseExcel = True
    'UseAxios = True
    'UseBrowserPrint = True
    'UseLottie = True

If however you want to use the core-functionality but with some of the plugins, you can then set those to True after CoreFunctionality.

Happy BANanoVuetifyAD3 coding.


  1. Setting the plugins = False, does not remove the related component code from the library & thus the compiled BANanoVuetifyAD3.b4xlib.
  2. Also, this does not remove the JS / CSS from the b4xlib, but will surely remove the unused CSS/JS content from your final app.
  3. Also use the package manager as it removes unused component code as an added functionality.
  4. Comment your code with 'IgnoreDeadCode and run the RemoveDeadCode functionality with the transpiler.
  5. Set Online = True for your final app to use jsDelivr CDN, this decreases the size of your app and ensures the needed cached resources are used. If however you expect erratic internet connection, consider making your app a PWA.