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:

Name	Type	Default	Required?	Description
contiguousOnly	boolean	false	no	Only include the "lower 48" contiguous US States
exclude	string[]	[]	no	List of states or territories to exclude. Can be an array of state abbreviations, e.g. ['AK', 'HI'], state names, e.g. ['Alaska', 'Hawaii'], or a mix of both
includeTerritories	boolean	false	no	Include US protectorates and territories, e.g. Puerto Rico, Guam, etc.
storedValue	string	abbr	no	The value to be stored in the output variable for this input. Available options: abbr, name, capital
text	string	name	no	The text value that will be shown in the dropdown. Available values: abbr, name, capital

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!