Code Generator Tool for VueJs

VueJs 3.0 + NodeJs(12) + ExpressJs(4.13)+ MongoDB

For running the code.
Hardware Requirements

For ReactJs Requirements


Two folders

  1. Open the application folder 
  2. Click on the CodeGenerator.exe as shown in the below image



New project :

To create a new project click on the File-->New.

Click on ManageCollections and start adding the collections and required fileds in the collections.

After setting the required properties we can save the project for future use. The file will be save in json format.

Click on File->Save



We can open the saved project file by click on File->open


File-->Set Download Path

And after completing the code generation the generated copied to the given destination folder.

Click on Done to save them.


After setting the properties for the forms and the field (tables and fields), need to check for any errors.

The basic rules it checks for is

  1. Each and every table should contain only on primary key.
  2. Every form should be in a valid Menu. 
  3. If any of the filed is set as required it should have a Validation message.
  4. If thare are Tabs for a form all the fields should be set with forms.
  5. If the fileds control type is Combo box it should be set with either Dynamic or Static look should be set.

Once all the rules are set the validation will be success or else the errors will be displayed and needs to be corrected.

Process-->Generate Code

After the validation is successfull click on the Process-->Generate Code. The code will be generated and copied to the destination folder( which was set in the set theame path).

Manage Tabs

Tabs are used to show alternative views of the same group of information in a page. Select the table the tabs need to be added and click on "Add New Tab" and provide the required tab name.

Static lookup service is used for filling the combo boxes with static array of data. Like for filling a combobox with Gender we can create a static lookup with list of Male and Female types. Key is the one which is displayed to the user and the value is for storing to DB etc.

Manage Dynamic Look Up

Dynamic lookup service is used for filling the combo boxes with data from a table. Need to provide Table from which the data needs to be fetched. Key the filed which is shown in the UI and Value is the one which is stored to DB etc.




To create a form which Displays the list of records for the table in a Grid. Can set the properties like display in grid or not, included in search or not etc. For more info click here

Add Update form

To craete Add/Update form. can set the display text of the form, control types for the fields, validation messages etc. For more info click here

Delete Form

To craete Delete form. can set the display text of the form, and the message.

  1. Open the project in visual studio code.
  2. Open the configmain.js from the config folder
  3. Replace the database with your databse name.


And open the terminal and run "npm installl" command



After installing the node_modules 

Run the command "npm start"



In the Integrated Terminal  Use npm start to run the project.