Package Exports

vue3-tel-input

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue3-tel-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue3-tel-input

International Telephone Input with Vue.

In-action GIF

Documentation and live demo

Visit the website

Getting started

Install the plugin:
```
npm install vue3-tel-input
```

Add the plugin into your app:

import { createApp } from 'vue'
import VueTelInput from 'vue3-tel-input'
import 'vue3-tel-input/dist/vue3-tel-input.css'

import App from './App.vue'

const app = createApp(App);
app.use(VueTelInput);
app.mount("#app");

More info on installation

Use the vue3-tel-input component:

<template>
  <vue-tel-input v-model="phone"></vue-tel-input>
<template>

Installation

npm

  npm install vue3-tel-input

Install the plugin into Vue:

  import { createApp } from 'vue'
  import VueTelInput from 'vue3-tel-input'
  import 'vue3-tel-input/dist/vue3-tel-input.css'

  import App from './App.vue'

  const app = createApp(App);
  app.use(VueTelInput, options); // Define default global options here (optional)
  app.mount("#app");

View all available options in Props.

Or use the component directly:

<!-- your-component.vue-->
<template>
  <vue-tel-input v-model="value"></vue-tel-input>
</template>
<script>
import { VueTelInput } from 'vue3-tel-input'

export default {
  components: {
    VueTelInput,
  },
};

<style src="vue3-tel-input/dist/vue3-tel-input.css"></style>
</script>

Browser

<script src="https://unpkg.com/vue3-tel-input"></script>
<link rel="stylesheet" href="https://unpkg.com/vue3-tel-input/dist/vue3-tel-input.css">

** If Vue is detected in the Page, the plugin is installed automatically.**

** Otherwise, manually install the plugin into Vue:

Vue.use(window['vue-tel-input']);

Use as a custom field of vue-form-generator

Add a component using vue-form-generator's abstractField mixin

  <!-- 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>

  import Vue from 'vue';
  import TelInput from '<path>/tel-input.vue';

  Vue.component('field-tel-input', TelInput);

Now it can be used as tel-input in schema of vue-form-generator

var schema: {
  fields: [{
      type: "tel-input",
      label: "Awesome (tel input)",
      model: "telephone"
  }]
};

Read more on vue-form-generator's instruction page

Changelog

Go to Github Releases

License

made with ❤ by Victory Osayi initial source forked from Steven.