Skip to content

Commit 3dbc192

Browse files
committed
Update installation instructions README
1 parent df3e3d1 commit 3dbc192

File tree

1 file changed

+80
-57
lines changed

1 file changed

+80
-57
lines changed

README.md

Lines changed: 80 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -3,54 +3,98 @@ International Telephone Input with Vue.
33

44
[![](https://img.shields.io/npm/dt/vue-tel-input.svg)](https://www.npmjs.com/package/vue-tel-input) [![](https://img.shields.io/github/stars/educationlink/vue-tel-input.svg)](https://github.com/EducationLink/vue-tel-input)
55

6-
Checkout [Demo](https://educationlink.github.io/vue-tel-input/) or [Playground](https://codesandbox.io/s/0yyyk45q7w?fontsize=14&module=%2Fsrc%2FApp.vue&moduleview=1).
6+
Checkout [Demo](https://educationlink.github.io/vue-tel-input/).
77

88
If you are using v2.x.x, check out this [documentation](https://github.com/EducationLink/vue-tel-input/blob/master/README-v2.md).
99

1010
<p align="center">
1111
<img width="600px" alt="In-action GIF" src="https://thumbs.gfycat.com/EducatedPoliteBluefintuna-size_restricted.gif"/>
1212
</p>
1313

14-
## Installation
15-
- **yarn**:
16-
```bash
17-
yarn add vue-tel-input
14+
## Getting started
15+
- Install the plugin:
16+
17+
```
18+
npm install vue-tel-input
1819
```
19-
- **npm**:
20-
```bash
21-
npm install vue-tel-input
20+
21+
- Add the plugin into your app:
22+
23+
```javascript
24+
import Vue from 'vue'
25+
import VueTelInput from 'vue-tel-input'
26+
27+
Vue.use(VueTelInput)
28+
```
29+
30+
[More info on installation](#installation)
31+
32+
- Use the `vue-tel-input` component:
33+
34+
```html
35+
<template>
36+
<vue-tel-input v-model="phone"></vue-tel-input>
37+
<template>
2238
```
2339

24-
## Usage
25-
- Install the component:
26-
```js
27-
import Vue from 'vue'
28-
import VueTelInput from 'vue-tel-input'
29-
30-
Vue.use(VueTelInput)
31-
```
32-
33-
- In your component:
34-
```html
35-
<template>
36-
...
37-
<vue-tel-input v-model="phone"></vue-tel-input>
38-
...
39-
<template>
40-
<script>
41-
export default {
42-
data() {
43-
return {
44-
phone: '',
45-
};
46-
},
47-
}
48-
</script>
49-
```
40+
## Installation
41+
### npm
42+
```bash
43+
npm install vue-tel-input
44+
```
45+
46+
Install the plugin into Vue:
47+
48+
```javascript
49+
import Vue from 'vue'
50+
import VueTelInput from 'vue-tel-input'
51+
52+
Vue.use(VueTelInput)
53+
```
54+
55+
Or use the component directly:
56+
57+
```html
58+
<!-- your-component.vue-->
59+
<template>
60+
<vue-tel-input v-model="value"></vue-tel-input>
61+
</template>
62+
<script>
63+
import { VueTelInput } from 'vue-tel-input'
64+
65+
export default {
66+
components: {
67+
VueTelInput,
68+
},
69+
};
70+
</script>
71+
```
72+
73+
### Browser
74+
75+
Include [vue-tel-input](/dist/vue-tel-input.min.js) in the page.
76+
77+
```html
78+
<script src="https://unpkg.com/vue-tel-input"></script>
79+
```
80+
81+
**If Vue is detected in the Page, the plugin is installed automatically.**
82+
83+
Manually install the plugin into Vue:
84+
85+
```javascript
86+
Vue.use(VueTelInput)
87+
```
88+
89+
Or use the component directly:
90+
91+
```javascript
92+
Vue.component('vue-tel-input', VueTelInput.VueTelInput)
93+
```
5094

5195
### Use as a custom field of [vue-form-generator](https://github.com/vue-generators/vue-form-generator)
5296

53-
Check out the setup in [Codesandbox](https://codesandbox.io/s/vue-tel-input-with-vue-form-generator-q56jg).
97+
Check out the setup in [CodeSandbox](https://codesandbox.io/s/vue-tel-input-with-vue-form-generator-q56jg).
5498

5599
- Add a component using `vue-form-generator`'s `abstractField` mixin
56100
```html
@@ -141,30 +185,9 @@ Read more on `vue-form-generator`'s [instruction page](https://icebob.gitbooks.i
141185
- Country Codes data from [intl-tel-input](https://github.com/jackocnr/intl-tel-input/blob/master/src/js/data.js).
142186
- User's country by [ip2c.org](https://ip2c.org/s), request using [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
143187

144-
## Demo Usage
145-
146-
```bash
147-
148-
# install dependencies
149-
$ yarn/npm install
150-
151-
# compile demo for development
152-
$ yarn/npm dev
153-
154-
# open Browser and start serving in demo
155-
$ yarn/npm demo:open
156-
157-
# compile dist demo
158-
$ yarn/npm dist:demo
159-
160-
# compile dist
161-
$ yarn/npm dist
162-
163-
```
164-
165188
## Typescript Support
166189

167-
If you working with typescript will need declaration requirements.
190+
If you work with typescript you will need declaration requirements.
168191

169192
```bash
170193
npm install --save-dev @types/vue-tel-input

0 commit comments

Comments
 (0)