@@ -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
88If 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
170193npm install --save-dev @types/vue-tel-input
0 commit comments