v-address-fields v1.0.0

VAddressFields

VAddressFields is a Vue.js plugin that provides components for collecting postal address information. It extends the Vuetify UI library which implements the Material design standard.

Check out a working demo on CodePen.

NOTE: This is a very simple component that was created primarily as part of a short course on how to build packageable components to extend Vuetify with TypeScript. While it should perform exactly as advertised, many developers may find it is just easier to provide a list of US states directly to a Vuetify VAutocomplete component.

Installation

From the root of a Vue project already using Vuetify:

npm i -S v-address-fields

Or if using yarn

yarn add v-address-fields

If you want the component to be registered and available globally, from your main Vue configuration file (frequently src/main.js), add the following before instantiating Vue for the first time:

import Vue from 'vue'
import VAddressFields from 'v-address-fields'

Vue.use(VAddressFields)

Or if you just want to use the v-state-select component within another component:

<script>
  import { VStateSelect } from 'v-address-fields'
  export default {
    components: {
      VStateSelect
    },
    /* ... the rest of your code ... */
  }
</script>

Basic Usage

<template>
  <v-state-select v-model="state"></v-state-select>
</template>

<script>
  // the import statement and components section is unnecessary
  // if the component was registered globally (see above)
  import { VStateSelect } from 'v-address-fields'
  export default {
    components: {
      VStateSelect
    },
    data: () => ({
      state: null
    })
    /* ... the rest of your code ... */
  }
</script>

Description

VStateSelect extends Vuetify's VAutocomplete component. All of the properties available on VAutocomplete are also available on VStateSelect except items. The items property is overridden by the list of US states built into this component. There are five properties unique to VStateSelect that allow you to modify the list of states:

Questions, Comments, Bug Reports, etc.

Comments, questions, pull requests, and bug reports are very welcome. Please submit an issue via the Issues tab above.

Have fun!