![vue-g-components](data:image/png;base64,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)
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