npmpackage.info

Gathering detailed insights and metrics for vnatk-vue

Other packages similar to vnatk-vue

vnatk-express-sequelize

0.0.47

VNATK-EXPRESS-SEQUELIZE is express middleware to provide automated backend for VNATK-VUE

Gathering detailed insights and metrics for vnatk-vue

vnatk-vue - 0.0.57 | npmpackage.info

vnatk-vue

VNATKVUE is Frontend part of VNATK (Vue Node AgileTool Kit). Making app development easy by including some best practices as integral part, yet, giving you total customization options.

0.0.57

Vue

375.75 kB

1.6

Installations

npm install vnatk-vue

Developer Guide

BETA

Typescript

No

Module System

CommonJS, UMD

Min. Node Version

>=10

Node Version

14.20.0

NPM Version

6.14.17 Pull Requests

Open

0

Total

19

Closed

1

Merged

18

Issues

Open

0

Total

1

Closed

1

Releases

Unable to fetch releases

Languages

Vue

JavaScript

Vue (74.67%)

JavaScript (25.33%)

Developer

gowrav-vishwakarma

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

297 Commits

4 Forks

2 Watchers

4 Branches

2 Contributors

Updated on Jan 07, 2022

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

0.0.57

Package Id

vnatk-vue@0.0.57

Unpacked Size

375.75 kB

Size

78.84 kB

File Count

NPM Version

6.14.17

Node Version

14.20.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Beta Release

Click Here for Official Documentation

VNATK

VNATK is a set of client and server frameworks set to get your work started ASAP. Also we all know how tesdius it is to do maintenance of any project specially when client/company is ever changing their requirements. By looking at those issue I was missing somehting that really is fast, really RAPID APPLICATION DEVELOPMENT (RAD) framework.

So, here we are with two sets of frameworks, this VNATK-VUE and VNATK-EXPRESS-SEQULIZE.

Both repository contains same README file so pls follow proper link to go to respective repository.

Link to [VUEATK-VUE] (https://github.com/gowrav-vishwakarma/vnatk-vue) Official Documentation

Link to [VUEATK-EXPRESS-SEQUELIZE] (https://github.com/gowrav-vishwakarma/vnatk-express-sequelize)

VNATK-EXPRESS-SEQULIZE (Backend with Express and Squelize)

Equipped with a few endpoints that gives you all power with Sequalize-QL developed by this project.

This express middleware will give all the fule required from server to VNATK Frontend Frameworks.

Please setup Express server setup equipped with VNATK-EXPRESS-SEQULIZE first as per information given here https://github.com/gowrav-vishwakarma/vnatk-express-sequelize

VNATK-VUE (FrontEnd with Vue, Vuetify)

VNATKVUE is Frontend part of VNATK (Vue Node AgileTool Kit). Making app development easy by including some best practices as integral part, yet, giving you total customization options.

Dependencies: Vue (2.*), Vuetify(2.*), vue-form-base, lodash, dotenv

Getting started

Please setup Express server setup equipped with VNATK-EXPRESS-SEQULIZE first as per information given here

VUEATK-EXPRESS-SEQUELIZE https://github.com/gowrav-vishwakarma/vnatk-express-sequelize

For simplicity we have our project folder structure as follows

1Your Project Root Folder
2 - client # Having vue fronetend
3 - server # Having express-sequelize backend

In case you are working with microservice architecture, you can have following structure

1Your Project Root Folder
2 - VueClientAPP1
3 - VueClientAPP2
4 - ExpressBackendService1
5 - ExpressBackendService2
6 - ...
7 - ExpressBackendService..N

Step 1.0: setup express app

Please setup Express server setup equipped with VNATK-EXPRESS-SEQULIZE first as per information given here

VUEATK-EXPRESS-SEQUELIZE https://github.com/gowrav-vishwakarma/vnatk-express-sequelize

Step 1.1: setup Models

This section describes what extra features you can introduce in Sequlize models to get best of VNATK-VUE from frontend, on the other hand, vnatk-express-sequelize will handle all the features describe here.

Create models in models folder. For more about Models in sequlize please follow sequlize documentations.

Let's have a sample model. Please read Model comments as documentation. Some properties and methods are specific to VNATK.

1'use strict';
2const { Model } = require('sequelize');
3
4module.exports = (sequelize, DataTypes) => {
5  class User extends Model {
6    static associate(models) {
7      // define association here
8      // City and State Models must be created in same manner in models folder also
9      User.belongsTo(models.City, { foreignKey: 'city_id' });
10      User.belongsTo(models.State, { foreignKey: 'state_id' });
11
12    }
13    // you have to create this STATIC function in your model to tell what type of actions are doable on any model
14    static vnAtkGetActions(models) {
15      return [
16        {
17          // any identifier of action
18          name: "deactivate",
19          /* type defined at what level a action will be applicable
20          'single'=> for Actions that are executable on any loaded row like activate, or deactivate.
21          'NoRecords => for Actions that are doable at Model level ie sendEventInvitationToAll
22          'MultiRecords' => for Actions that are doable on selected records by selecting checkboxes in data-grids ie submitSelected
23          */
24          type: 'single',
25          // Your data-grid may have many records but if you want that action to be available only on specific conditions
26          // put your where, make sure you have those columns available in model->attributes if defined ie status in bellow where
27          where: {
28            status: 'Active'
29          },
30          // actual function in this model to be called, created bellow
31          execute: 'deActivate'
32        },
33        {
34          name: "activate",
35          type: 'single',
36          // If you want a different caption on DataGrid or Forms for your field
37          caption: 'Activate',
38          where: {
39            // Multiple conditions, Array is considered like OR
40            // Multiple fields will be in AND Condition
41            status: ['InActive', 'Blocked']
42          },
43          execute: 'activate'
44        },
45        {
46          name: "block",
47          type: 'single',
48          caption: 'Block',
49          where: {
50            status: ['InActive', 'Active']
51          },
52          execute: 'block',
53          /**
54           * if defined "formschema" the action becoms UI based action and on click
55           * will generate a form with proper validations etc. On Submitting this form
56           * your "execute" value will be executed on model with sending all records of row along with these form values.
57           * "EVERYTHING IS OVERRIDABLE AND CUSTOMIZABLE"
58           * This is important. Even if you define something here, On Frontned you can override formfield, validations etc as per page to page need
59           * and still all things will work like a charm.
60           * For more about Form Schema please read at 
61           * 
62           * This is important link below
63           * 
64           * https://wotamann.github.io/ 
65           */
66          formschema: {
67            reason: {
68              type: "text",
69              label: "reason",
70            },
71            password: {
72              type: "text",
73              ext: 'password',
74              label: "Your Password to allow blocking",
75              clearable: true,
76              // solo: true,
77              class: "mx-1 mt-1"
78            },
79          }
80        },
81      ]
82    }
83    // Actual function that will be called on loaded model
84    // In other way of sequlize you define instance variable as 
85    // sequelize.prototype=function () { ... }
86    deActivate() {
87      this.status = 'InActive'
88      return this.save().then(self => {
89        return self;
90      })
91    }
92
93    activate() {
94      this.status = 'Active'
95      return this.save().then(self => {
96        return self;
97      })
98    }
99
100    // block action is defined with formschema in above vnAtkGetActions method and will receive that in formdata when submitted with record that is being executed with this method.
101    block(formdata) {
102      this.status = 'Blocked'
103      return this.save().then(self => {
104        return self;
105      })
106    }
107
108  }
109
110  // This init method is defined by 'define' method in other sequelize ways. technically its same ...
111
112  User.init(
113    {
114      // WHILE SEQULIZE AUTOMATICALLY CONSIDER ID FIELD, FOR VNATK IT IS REQRUIED TO DEFINE AS FIELD
115      id:{
116        type: DataTypes.INTEGER,
117        primaryKey: true,
118        autoIncrement: true
119      },
120      name: {
121        type: DataTypes.STRING,
122        // caption is vnatk field property to define its caption at frontend
123        caption: 'Name',
124      },
125      email: {
126        validate: { isEmail: true },
127        type: DataTypes.STRING,
128        defaultValue: 'guest@example.com'
129      },
130      mobile: {
131        type: DataTypes.STRING,
132        validate: {
133          isNumeric: {
134            msg: 'Mobile number can only contains number',
135            args: true
136          },
137        },
138      },
139      password: {
140        type: DataTypes.STRING,
141        ext: 'password' // VNATK Specific, for more ext please look at vue-form-base schemas system
142      },
143      status: DataTypes.ENUM('Applied', 'Active', 'InActive', 'Blocked'),
144      createdAt: {
145        type: DataTypes.DATE,
146        field: 'created_at'
147        isSystem:true // VNATK- isSystem will not be displayed default in Table or Add/Edit forms unless specified specifically
148      },
149      updatedAt: {
150        type: DataTypes.DATE,
151        field: 'updated_at',
152        isSystem:true
153      }
154    },
155    {
156      sequelize,
157      modelName: 'User',
158    }
159  );
160  return User;
161};

thats it... let's setup Vue frontend now

Step 2: setup Vuetify app

You can add the system in existing Vue app also as long as you are already using Vuetify

Considering we are in "Your Project Root Folder"

lets create express app (Server/service) from scratch, you are welcome to use any other way or manual if you know what you are doing

1# just be sure you are in root of your project
2$yourProjectRoot> ls
3server
4
5#install vue-cli globally if not installed 
6$yourProjectRoot> npm install -g @vue/cli
7$yourProjectRoot> vue create client
8#follow wizard, I preferred default for beginners
9
10$yourProjectRoot> ls
11client  server
12
13$yourProjectRoot> cd client
14$yourProjectRoot/client> vue add vuetify
15# I prefer defaults for now
16
17#to make better use of views etc just add router
18$yourProjectRoot/client> vue add router
19
20$yourProjectRoot/client> npm install --save material-design-icons-iconfont axios vuetify-form-base vue-papa-parse vnatk-vue

Step 2.1: setup VNATK-VUE

We are all set to use our system with defined model as in Back

First we need to update plugins/vuetify.js file as per given code

1import Vue from 'vue';
2import 'material-design-icons-iconfont/dist/material-design-icons.css'
3import 'vuetify/dist/vuetify.min.css'
4import Vuetify from "vuetify";
5
6Vue.use(Vuetify, {
7    iconfont: 'md',
8});
9
10export default new Vuetify({
11});

Also the default setup does not usage v-app from vuetify but just a div in src/App.vue. Lets edit that file also like following

1<template>
2<!-- this below v-app was div in starting -->
3  <v-app id="app"> 
4    <div id="nav">
5      <router-link to="/">Home</router-link> |
6      <router-link to="/about">About</router-link>
7    </div>
8    <router-view />
9  </v-app>
10</template>
11

Step2.2: setup services / axios connections

To connect our service/server let's create a folder services in your project src folder. Considering server/service we created in express setup above, is for customers. Create a file customer.js in services folder and place the following code there

1import axios from "axios";
2
3const api = axios.create({
4  baseURL: process.env.VUE_APP_BASE_URL_CUSTOMER || "http://localhost:3000"
5});
6
7export default api;

Step2.2: Create Vue Views

Our system is ready to rock, now we will just create models and methods in Sequlize at server side and views/page in Vue Frontend, The rest logic is well done by itself.

for now open views/Home.vue file and place the following content to see the magic

1<template>
2  <vnatk-crud :options="crudoptions"> </vnatk-crud>
3</template>
4
5<script>
6import { VnatkCrud } from "vnatk-vue";
7import customer from "../services/customer";
8
9export default {
10  name: "SampleCRUD",
11  components: {
12    VnatkCrud,
13  },
14  data() {
15    return {
16      crudoptions: {
17        service: customer,
18        model: "User",
19        title: "Users",
20      },
21    };
22  },
23};
24</script>

And your crud will be there with all avilable other actions also like the image below

Notice city_id and state_id is automatically de-refenced to have their respective names from associations and all defined actions are available in drop down menu of each row.

By default system assumes name as title field that is shown instead of ID, but do not worry if you don't follow these notations, everything is customizable.

alt text

This is how edit form and functionality is created.

alt text

REMEMBER, WE HAVE NOT CREATED OR TOUCHED ANYTHING ON SERVER SIDE AFTER CREATING MODELS AND JUST RUN SERVER.

Too much fields, let's start configuring options, just change the crud options on vue component data as follows

1data() {
2    return {
3      crudoptions: {
4        service: customer,
5        model: "User",
6        title: "Users",
7        // Use response or read, response to work on Array based data crud and read for API based data fetch
8        // response: {idfield:'no', data:[{no:1,name:'x',age:20},{no:2,name:'y',age:20}],headers:[{text:'ID',value:'no',hide:true},{text,value},{}],actions:[{name,cation,type,formschema},{},{}]} // Provide data to skip service calling and managing Array dased data crud
9
10        //read defines all options to define data read ie R IN CRUD
11        read: {
12          // model options are for your sequlize models, all same (for Operators you need to do a small trick here)
13          modeloptions: {
14            attributes: ["name", "email", "state_id", "city_id", "status"],
15          },
16        },
17      },
18    };
19  },

and result is like

alt text

And the configurations are easy to read and maintains. A complete configuration can be as follows.

WE ARE IN PROCESS TO HAVE A COMPLETE DOCUMENTATION AND TESTINGS. THIS IS JUST A WORKING PROTOTYPE. FUNCTIONAL BUT WILL BE REFACTORED FOR CODE QUALITY AND PERFORMANCE SOON.

REMEMBER WE ARE STILL 0.0.x ;)

Detailed documentation of VNATK Components and respective options

<vnatk-crud :options="crudoptions">

1<template>
2  <vnatk-crud :options="crudoptions" @before-action-execute="checkValues" @before-action-execute='handleResponse'>
3  <!-- You can override any column and give it your own format -->
4    <template v-slot:item.City.name="{ item }">
5      City: {{ item.City.name }}<br />
6      City Status : {{ item.City.status }}
7    </template>
8  </vnatk-crud>
9</template>
10
11<script>
12import { VnatkCrud } from "@/entry";
13import customer from "./services/customer";
14
15// Required for import functioanlity, Use VuePapaParse globally, if you use import with most of CRUDS
16import Vue from "vue";
17import VuePapaParse from "vue-papa-parse";
18Vue.use(VuePapaParse);
19
20
21export default {
22  name: "ServeDev",
23  components: {
24    VnatkCrud,
25  },
26  data() {
27    return {
28      crudoptions: {
29        service: customer,
30        model: "User",
31        title: "Users",
32        basepath: "/vnatk", //OPTIONAL, default to '/vnatk
33        quickSearch: ["field1", "field2", "field3"],
34        create: { // OPTIONAL, default to true, set true to add all fields in Model
35          uititle: "Add New User",
36          modeloptions: { // Sequlize model options
37            attributes: ["name", "email", "status", "city_id", "password"],
38          },
39          defaultvalues: {
40            userType: "employee",
41            mobile: function (item) {
42              console.log("callback function");
43              console.log(item);
44              return item.firstName.length;
45            },
46          },
47        },
48        read: { // OPTIONAL, default to true, set true to read all fields, headers and actions
49          modeloptions: { // Sequalize model options
50            attributes: [
51              "name",
52              "email",
53              "status",
54              "state_id",
55              "city_id",
56              "mobile",
57            ],
58            // include: ["City", "State"],  // to get all attributes with including
59            include: [
60              {
61                model: "City",
62                attributes: ["name", "status"],
63              },
64              {
65                model: "State",
66                attributes: ["name", "status", "gst_code"],
67              },
68            ],
69          },
70          modelscope: false, // String for scope name or Boolean true for default scope or false for unscoped
71          autoderef: true, // OPTIONAL, default true
72          headers: true, // OPTIONAL, default true
73          serversidepagination: true, // Skip to fetch all records and do pagination and sorting on client side
74          datatableoptions: { // OPTIONAL, defaults to v-datatable options.sync
75            multiSort: true,
76            mustSort: false,
77          },
78        },
79        update: { // OPTIONAL, defaults to true, set true to edit all non primary and system fields in crud
80          uititle: "Edit User - {name}",
81          modeloptions: { // Sequlize options to define what fields you want to allow to edit
82            attributes: [
83              "name",
84              "email",
85              "status",
86              "city_id",
87              "state_id",
88              "mobile",
89            ],
90          },
91        },
92        delete: true, // OPTIONAL, default ture, set false to remove delete action
93        actions: true, // OPTIONAL, default true, st false to hide all actions including add/edit and delete
94        import: { // OPTIONAL, default undefined/false
95          service: catalog,
96          basepath: "/admin/vnatk",
97          model: "Category",
98          execute: "vnatk_import", // Class level function defined in model
99          success: this.reloadPage, //callback with passed response from model function
100          transaction: "file", // defaults to 'file' / or 'row'. In 'file' mode, data will rollback for all rows in case of error in any row, in 'row' mode, rows that are not imported are only rolled back and errored rows are reported back on import dialog.
101          rowformatter: function (item) {
102            // Example is not from actual Model but serves the purpose : TODO clear documentations
103            item.$vnatk_data_handle = "alwaysCreate"; // 'alwaysCreate' [default], 'findOrCreate','findAndUpdateOrCreate', (For Associations, two more options) 'findToAssociate' [Produce error if not found],'associateIfFound' [Ignores if not found]
104            item.$vnatk_find_options = {}; // if not provided, finding will be based on all fields and values defined above
105            item.$vnatk_cache_records = true; // default to true, set false to find each time even if same condition is already found previously
106            item.$vnatk_update_data = {}; // update only fields and their values defined here (if found), if this option is not provided, all fields defined above will be updated.
107
108            item.City = {
109              //Data to create or Update (if not defined vnatk_update_data)
110              name: item.city_name,
111              status: item.city_status,
112
113              $vnatk_data_handle: "alwaysCreate", // 'alwaysCreate' [default], 'findOrCreate','findAndUpdateOrCreate',(For Associations, two more options) 'findToAssociate' [Produce error if not found],'associateIfFound' [Ignores if not found]
114              $vnatk_find_options: {
115                modeloptions: {},
116                modescope: false,
117              }, // if not provided, finding will be based on all fields and values defined above
118              $vnatk_cache_records: true, // default to true, set false to find each time even if same condition is already found previously
119              $vnatk_update_data: {}, // update only fields and their values defined here (if found), if this option is not provided, all fields defined above will be updated.
120            };
121
122            item.FavPlaces = [
123              //hasMany relations: set as Array of Object, Each object defines one hasMany/many2many entry
124              {
125                //Data to create or Update (if not defined vnatk_update_data)
126                name: item.fav_place_name_1,
127                $vnatk_data_handle: "alwaysCreate", // 'alwaysCreate' [default],'findToAssociate' [Produce error if not found],'findOrCreate','findAndUpdateOrCreate','associateIfFound' [Ignores if not found]
128                $vnatk_find_options: {},
129                $vnatk_cache_records: true, // default to true, set false to find each time even if same condition is already found previously
130                $vnatk_update_data: {},
131                $set_fresh_relations: false, // default to false, if set true all data with this relation will be removed first
132              },
133              {
134                //Data to create or Update (if not defined vnatk_update_data)
135                name: item.fav_place_name_2,
136                $vnatk_data_handle: "alwaysCreate", // 'alwaysCreate' [default],'findToAssociate' [Produce error if not found],'findOrCreate','findAndUpdateOrCreate','associateIfFound' [Ignores if not found]
137                $vnatk_find_options: {},
138                $vnatk_cache_records: true, // default to true, set false to find each time even if same condition is already found previously
139                $vnatk_update_data: {},
140              },
141              {
142                //Data to create or Update (if not defined vnatk_update_data)
143                name: item.fav_place_name_3,
144                $vnatk_data_handle: "alwaysCreate", // 'alwaysCreate' [default],'findToAssociate' [Produce error if not found],'findOrCreate','findAndUpdateOrCreate','associateIfFound' [Ignores if not found]
145                $vnatk_find_options: {},
146                $vnatk_cache_records: true, // default to true, set false to find each time even if same condition is already found previously
147                $vnatk_update_data: {},
148              },
149            ];
150
151            delete item.city_name;
152            delete item.city_status;
153
154            return i;
155          },
156        },
157        ui: { // OPTIONAL, 
158          defaultActionPlacement: "DropDown", // "DropDown" or "buttonGroup". Where you want your default actions in row dropdown menu or as button in action columns for direct access
159        },
160        override: { //OPTIONAL
161          actions: [ // Override actions
162            {
163              name: "vnatk_edit", // edit action is given specially this name
164              placeIn: "buttonGroup", // or "DropDown"
165              // use this to merge formschema options
166              formschemaoverrides: { // Override formschema sent from server
167                mobile: {
168                  label: "Mobile Number",
169                },
170                city_id: {
171                  // titlefield - only used if field is reference/association type
172                  // default titlefield is considered as name
173                  titlefield: "City.name",
174                  label: "Your City",
175                  serviceoptions: { // OPTIONAL: Usefull if you are dealing with microservices
176                    service: customer,
177                    basepath: "/vnatk",
178                    model: "City",
179                    modelattributes: ["id", "name"],
180                    searchfield: ["name"],
181                    limit: 10,
182                  },
183                },
184                email: {
185                  clearable: true,
186                },
187                // state_id: {
188                //   titlefield: "State.name",
189                // no state_id related info is overrided, still working good, in this case: using same service to get details if id,name is required with default limit
190                // },
191              },
192            },
193            {
194              name: "vnatk_add", // add action is given specially this name
195              // use this to merge formschema options
196              formschemaoverrides: {
197                city_id: {
198                  label: "Your City ... ",
199                },
200              },
201            },
202            {
203              name: "activate",
204              placeIn: "buttonGroup", // or "DropDown"
205              icon: "mdi-format-align-left",
206              caption: "Activate User",
207              // formschema:{} // use this to override complete formschema
208              // formschemaoverrides:{} // use this to merge formschema options
209            },
210            {
211              name: "deactivate",
212              placeIn: "buttonGroup",
213              caption: "Deactivate",
214              // icon: "mdi-format-align-left",
215            },
216            {
217              name: "clientFunction",
218              type: "NoRecord",
219              execute: this.clientFunctionCallBack, // call this function if isClientAction to handle action, row items will be passed to function.
220              isClientAction: true,
221            },
222          ],
223          headers: { // OPTIONAL, override headers, hide, move position or create new columns
224            city_id: {
225              hide: true,
226            },
227            state_id: {
228              hide: true,
229            },
230            mobile: {
231              text: "User Mobile",
232              sortable: false, // OPTIONAL, default to true
233              // moveto: 0,
234            },
235            City: {
236              // Override DeReferanced Fields (received from server due to autoderef)
237              text: "Primary City", //Overrided header caption/text
238              value: "City.name", // Value does not have effect as alrady overrided column by slot in template above
239              // moveto: 2,
240            },
241            "State.gst_code": { // ADD a new column showing User.State.gst_code, look at how we included gst_code in read options model's include.
242              text: "State GST Code",
243              value: "State.gst_code",
244              sortable: true,
245              moveto: 4,
246            },
247            vnatk_actions: {
248              moveto: "last", // Either +INT to move from left to right or -INT to move from right to left or "last" to move column to last
249            },
250          },
251        },
252      },
253    };
254  },
255
256  methods: {
257    // Defined custom local clientaction handler
258    clientFunctionCallBack(item) {
259      console.log("CLIENT FUNCTION CALLED with item", item);
260    },
261    handleResponse(dataSent,DataReceived){
262      // Do something here
263    },
264
265    checkValues(action,item){
266      // Do something here
267    }
268  },
269};
270</script>

<model-designer :service="serviceInfo">

Model Designer is an under development tool to define and design your models from front end, Till beta model designer READS FROM models folder in express app BUT WRITES CHANGES IN copied files in models/modeldesigner.

alt text

1<template>
2  <model-designer :service="serviceInfo"> </model-designer>
3</template>
4
5<script>
6import { ModelDesigner } from "@/entry";
7import customer from "./services/customer";
8
9export default {
10  name: "ModelDesginierExample",
11  components: {
12    ModelDesigner,
13  },
14  data() {
15    return {
16      serviceInfo: {
17        service: customer,
18        basepath: "/vnatk",
19      },
20    };
21  },
22};
23</script>

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

License

Determines if the project has defined a license.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

102 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-p493-635q-r6gr
Warn: Project is vulnerable to: GHSA-3965-hpx2-q597
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Warn: Project is vulnerable to: GHSA-q4q5-c5cv-2p68
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh

Score

1.6

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to vnatk-vue

Other packages similar to vnatk-vue

vnatk-vue

Installations

Developer Guide

No

CommonJS, UMD

>=10

14.20.0

6.14.17

Pull Requests

0

19

1

18

Issues

0

1

1

Releases

Unable to fetch releases

Languages

Developer

gowrav-vishwakarma

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Beta Release

Click Here for Official Documentation

VNATK

VNATK-EXPRESS-SEQULIZE (Backend with Express and Squelize)

VNATK-VUE (FrontEnd with Vue, Vuetify)

Getting started

Step 1.0: setup express app

Step 1.1: setup Models

Step 2: setup Vuetify app

Step 2.1: setup VNATK-VUE

Step2.2: setup services / axios connections

Step2.2: Create Vue Views

REMEMBER, WE HAVE NOT CREATED OR TOUCHED ANYTHING ON SERVER SIDE AFTER CREATING MODELS AND JUST RUN SERVER.

Detailed documentation of VNATK Components and respective options

10

2

0

0

0

0

0

0

0

0

1.6

/10