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:
- easier for developers, designers, and team members to understand and find things/controls.
- easier for IDEs to interpret the code and provide assistance.
- easier to (re)use build tools you already use.
- 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
yarn add vue-g-components
npm
npm install vue-g-components --save
Setup
Register the plugin.
import GComponents from 'vue-g-components'; Vue.use(GComponents);
Or register components manually.
import {GInput,GCheckbox} from 'vue-g-components'; Vue.component('g-input', GInput); Vue.component('g-checkbox', GCheckbox);
Params
Input
| parameter |
type |
default |
| id |
string |
input-id-(element uid) |
| class-name |
string |
null |
| name |
string |
null |
| v-model |
string, number |
null |
| value |
string or number |
null |
| type |
text, password, date, number, datetime-local,month, search, tel, time,url or week, |
text |
| placeholder |
string |
null |
| pattern |
string |
null |
| validation-message |
string |
null |
| required |
boolean |
false |
| disabled |
boolean |
false |
| min |
number |
null |
| max |
number |
null |
| step |
number |
null |
Checkbox
| parameter |
type |
default |
| id |
string |
input-id-(element uid) |
| class-name |
string |
null |
| name |
string |
null |
| v-model |
string, number |
null |
| value |
string or number |
null |
| type |
text, password, date, number, datetime-local,month, search, tel, time,url or week, |
text |
| placeholder |
string |
null |
| pattern |
string |
null |
| validation-message |
string |
null |
| required |
boolean |
false |
| disabled |
boolean |
false |
| min |
number |
null |
| max |
number |
null |
| step |
number |
null |
A Google style Vue Component. github and npm package