Create Amazing Vuetify WebApps using BANanoVuetifyAD3 — Part 1

A running Vuetify WebApp
  1. Download the free development platform B4J. Follow the instructions on the download page to get yourself started. If you already did this from the previous article, there is no need to do it again.
  2. You also need the javascript transpiler, named BANano. Get it here.
  3. The BANanoVuetifyAD3 libraries are available from this github, please download these also
  4. I have created a template that you can install that will get you started in no time, please download it here.
  5. Finally, you need a WAMP server with https enabled. I use Laragon for development, as its easier to setup without hustles. You can do this with any webserver anyway. Download this and install it.
  1. We are almost there, create 3 folders on your PC. Lets call these c:\b4x\shared, c:\b4x\libraries and c:\b4x\workspace.
  1. Open B4J, click Tools, click Configure Paths and then point to the shared and libraries folders you just created. As an example, here is my configuration in Figure 1
  1. Open B4J, click on File > New > BVAD3EDS
  1. The Main module, AppStart sub-routine was called.
  2. This initialized the BANano library and then build the webapp by transpiling every code line you wrote to javascript, css and html.
  3. During the process of building the WebApp, the BANano_Ready event was called.
  4. BANano_Ready called the pgIndex.Initialize sub-routine.
  5. The pgIndex.Initialize sub-route initialized the BANAnoVuetifyAD3 library and created the structure of our project, by creating the layout, adding the route page components and their layouts etc. This is depicted with figure 7 below.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

I am getting cheaper pricing for hosting from other providers. Why is your price high?

Angular and MVC Core Architecture together in a nutshell: a real world example part 2

Let’s Create A Vue.js E-Commerce App

I am getting cheaper pricing for hosting from other providers. Why is your price high?

Object Recognition using CNN model

ZENITY COMMAND :

What is Moq and How to Use it to Ease Unit Testing

Angular Deployment : Host your Angular App on AWS EC2, Azure Virtual Machine

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anele Mbanga

Anele Mbanga

More from Medium

How To Pass The Data Between The Components In VueJs

Forcing Vue.js devtools extension to work in production mode on any website

Where does Nuxt.js fit in Web Development?

nuxtjs-for-web-development

VueJS: How to Delete/Destroy a Component