v-address-fields

A Vue.js plugin providing components to collect address information extending the Vuetify UI library.

Usage no npm install needed!

<script type="module">
  import vAddressFields from 'https://cdn.skypack.dev/v-address-fields';
</script>

README

VAddressFields

Build Status Coverage Status NPM Downloads at NPM GitHub Commitizen friendly We use Semantic Release

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!