Now a day’s web applications playing key role for most of the businesses and application developers are using JavaScript framework as their application frontend. VueJs is one of the popular framework and because of that I decided to create components for better user experience and save developers time instead of creating their own component and styling them.

In terms of user experience, we all know that most of the internet users are using google products and their rich user interface allow user to understand and use their product effectively. That is why I decided to use their styling for Vue Components to make your application more efficient and easy to use for end user.

A Vue component provides a uniform way to structure and we have named it vue-g-components which make:

1. easier for developers, designers, and team members to understand and find things/controls.
2. easier for IDEs to interpret the code and provide assistance.
3. easier to (re)use build tools you already use.
4. easier to cache and serve bundles of code separately.

Input

<g-input v-model="ValidationExample" placeholder="Username" pattern="^[a-zA-Z0-9]{4,10}$" validation-message="No Special characters allow!"></g-input>

Checkbox

<g-checkbox v-model="checkboxExample" value="Milk" validation-message="Milk is required!">Milk</g-checkbox>

Install

yarn add vue-g-components

npm install vue-g-components --save

Setup

import GComponents from 'vue-g-components'; Vue.use(GComponents); 

import {GInput,GCheckbox} from 'vue-g-components'; Vue.component('g-input', GInput); Vue.component('g-checkbox', GCheckbox); 

Params

Input

Checkbox

A Google style Vue Component. github and npm package