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