add vuetify properly

yogakurniawan · May 1, 2020 · 42f54d5 · 42f54d5
1 parent e8fd14c
commit 42f54d5
Show file tree

Hide file tree

Showing 12 changed files with 16,216 additions and 1,312 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # vue-tel-input-vuetify
-International Telephone Input with Vue.
+International Telephone Input with Vuetify.
 
 <p align="center">
 <img width="600px" alt="In-action GIF" src="https://thumbs.gfycat.com/EducatedPoliteBluefintuna-size_restricted.gif"/>
@@ -10,6 +10,8 @@ International Telephone Input with Vue.
 
 - [Getting started](#getting-started)
 - [Installation](#installation)
+  - [vue-cli](#vue-cli)
+  - [vuetify](#vuetify)
   - [npm](#npm)
   - [Browser](#browser)
   - [Use as a custom field of `vue-form-generator`](#use-as-a-custom-field-of-vue-form-generator)
@@ -20,128 +22,81 @@ International Telephone Input with Vue.
 - [Typescript Support](#typescript-support)
 - [Credits & Contributors](#credits-&-contributors)
 
-## Getting started
-- Install the plugin:
-
-  ```
-  npm install vue-tel-input
-  ```
-
-- Add the plugin into your app:
-
-  ```javascript
-  import Vue from 'vue'
-  import VueTelInput from 'vue-tel-input'
-
-  Vue.use(VueTelInput)
-  ```
+## Installation
+### vue-cli
+- create new vue project using `vue-cli`:
 
-  [More info on installation](#installation)
+```bash
+  vue create my-app
+  cd my-app
+```
 
-- Use the `vue-tel-input` component:
+### vuetify
+- install `vuetify` to newly created vue project
 
-  ```html
-  <template>
-    <vue-tel-input v-model="phone"></vue-tel-input>
-  <template>
-  ```
+```bash
+  vue add vuetify
+```
 
-## Installation
 ### npm
+- install `vue-tel-input-vuetify` to newly created vue project
+
 ```bash
-  npm install vue-tel-input
+  npm install vue-tel-input-vuetify
 ```
 
 Install the plugin into Vue:
 
 ```javascript
-import Vue from 'vue'
-import VueTelInput from 'vue-tel-input'
-
-Vue.use(VueTelInput, [globalOptions = {}]) // Define default global options here (optional)
-```
-> View all available options in [Props](#props).
-
-Or use the component directly:
-
-```html
-<!-- your-component.vue-->
-<template>
-  <vue-tel-input v-model="value"></vue-tel-input>
-</template>
-<script>
-import { VueTelInput } from 'vue-tel-input'
-
-export default {
-  components: {
-    VueTelInput,
-  },
-};
-</script>
-```
+  // src/plugins/vuetify.js
 
-### Browser
+  import Vue from 'vue';
+  import Vuetify from 'vuetify/lib';
 
-Include [vue-tel-input](/dist/vue-tel-input.min.js) in the page.
+  Vue.use(Vuetify);
 
-```html
-<script src="https://unpkg.com/vue-tel-input"></script>
+  export default new Vuetify({
+  });
 ```
 
-**If Vue is detected in the Page, the plugin is installed automatically.**
-
-Manually install the plugin into Vue:
-
 ```javascript
-Vue.use(VueTelInput)
-```
+// src/main.js
 
-Or use the component directly:
+import Vue from 'vue';
+import VueTelInput from 'vue-tel-input-vuetify';
+import vuetify from "./plugins/vuetify";
 
-```javascript
-Vue.component('vue-tel-input', VueTelInput.VueTelInput)
+Vue.use(VueTelInputVuetify, {
+  vuetify,
+});
 ```
+> View all available options in [Props](#props).
 
-### Use as a custom field of [vue-form-generator](https://github.com/vue-generators/vue-form-generator)
-
-Check out the setup in [CodeSandbox](https://codesandbox.io/s/vue-tel-input-with-vue-form-generator-q56jg).
+Use the `vue-tel-input-vuetify` component:
 
-- Add a component using `vue-form-generator`'s `abstractField` mixin
   ```html
-    <!-- tel-input.vue -->
-    <template>
-      <vue-tel-input v-model="value"></vue-tel-input>
-    </template>
-
-    <script>
-    import { abstractField } from 'vue-form-generator';
-
-    export default {
-      name: 'TelephoneInput',
-      mixins: [abstractField],
-    };
-    </script>
+  <template>
+    <vue-tel-input-vuetify v-model="phone"></vue-tel-input-vuetify>
+  <template>
+
+  <script>
+  export default {
+    data() {
+      return {
+        phone: null
+      }
+    }
+  };
+  </script>
   ```
 
-- Register the new field as a global component
-  ```js
-    import Vue from 'vue';
-    import TelInput from '<path>/tel-input.vue';
+### Browser
 
-    Vue.component('field-tel-input', TelInput);
-  ```
+Include [vue-tel-input-vuetify](/dist/vue-tel-input-vuetify.min.js) in the page.
 
-- Now it can be used as `tel-input` in schema of `vue-form-generator`
-  ```js
-  var schema: {
-    fields: [{
-        type: "tel-input",
-        label: "Awesome (tel input)",
-        model: "telephone"
-    }]
-  };
-  ```
-Read more on `vue-form-generator`'s [instruction page](https://icebob.gitbooks.io/vueformgenerator/content/fields/custom_fields.html)
+```html
+<script src="https://unpkg.com/vue-tel-input-vuetify"></script>
+```
 
 ## Usage
 
@@ -193,14 +148,6 @@ Read more on `vue-form-generator`'s [instruction page](https://icebob.gitbooks.i
   | ---- | ----------- | ----- |
   | `arrow-icon` | Replace the arrow next to the flag with a component of your choice | Available from [v2.4.3](https://github.com/EducationLink/vue-tel-input/releases/tag/v2.4.3) |
 
-## Typescript Support
-
-If you work with typescript you will need declaration requirements.
-
-```bash
-npm install --save-dev @types/vue-tel-input
-```
-
 ## Credits & Contributors
 
 **Credits**