import { createApp } from 'vue'

createApp({
  components: {
    // ... //
  }
}).mount('#app')
        

import { Zipcode } from 'twzipcode-vue'

...
  components: {
    TwzipcodeZipcode: Zipcode,
  },
...
          
        

<twzipcode-zipcode text-template=":zipcode :county-:city"></twzipcode-zipcode>

<select id="twzipcode__zipcode" class="twzipcode twzipcode__zipcode">
  <option value="100">100 臺北市-中正區</option>
  <option value="103">103 臺北市-大同區</option>
          
        

import { ZipcodeGroupby } from 'twzipcode-vue'

...
  components: {
    TwzipcodeZipcodeGroupby: ZipcodeGroupby,
  },
...
          
        

<twzipcode-zipcode-groupby></twzipcode-zipcode-groupby>

<select id="twzipcode__zipcode--groupby" class="twzipcode twzipcode__zipcode twzipcode__zipcode--groupby">
  <optgroup label="臺北市">
    <option value="100">中正區</option>
    <option value="103">大同區</option>
          
        

import { County } from 'twzipcode-vue'

...
  components: {
    TwzipcodeCounty: County,
  },
...
          
        

<twzipcode-county></twzipcode-county>

<select id="twzipcode__county" class="twzipcode twzipcode__county">
  <option value="臺北市">臺北市</option>
  <option value="基隆市">基隆市</option>
          
        

.twzipcode {
  font-weight: 700;
}

.twzipcode__county {
  background-color: red;
  color: white;
}
// 如果只有一個，可使用 #twzipcode__county 

.twzipcode__zipcode--groupby {
  background-color: yellow;
  color: brown;
}
// 如果只有一個，可使用 #twzipcode__zipcode--groupby

.twzipcode__zipcode {
  background-color: lightskyblue;
  color: dimgrey;
}
// 如果只有一個，可使用 #twzipcode__zipcode
          
        

<twzipcode-zipcode value-template=":county:city"
                   model-value="臺北市信義區"
                   text-template=":zipcode :county:city"></twzipcode-zipcode>

<select id="twzipcode__zipcode" class="twzipcode twzipcode__zipcode">
  <option value="臺北市中正區">100 臺北市中正區</option>
  <option value="臺北市大同區">103 臺北市大同區</option>
          
        

<twzipcode-county value-locale="en"
                  text-locale="en"></twzipcode-county>

<twzipcode-zipcode-groupby value-locale="en"
                           text-locale="en"></twzipcode-zipcode-groupby>

<twzipcode-zipcode value-locale="en"
                   text-locale="en"
                   text-template=":zipcode :county / :city"></twzipcode-zipcode>


<select id="twzipcode__county" class="twzipcode twzipcode__county">
  <option value="臺北市">Taipei City</option>
  <option value="基隆市">Keelung City</option>

<select id="twzipcode__zipcode--groupby" class="twzipcode twzipcode__zipcode twzipcode__zipcode--groupby">
  <optgroup label="Taipei City">
    <option value="100">Zhongzheng District</option>
    <option value="103">Daton District</option>

<select id="twzipcode__zipcode" class="twzipcode twzipcode__zipcode">
  <option value="100">100 Taipei City / Zhongzheng District</option>
  <option value="103">103 Taipei City / Daton District</option>
          
          

<twzipcode-zipcode id="twzipcode__zipcode"
            @update:model-value="zipcode => demoCallbackValue = zipcode"></twzipcode-zipcode>

<twzipcode-zipcode id="twzipcode__zipcode"
            v-model="zipcode"></twzipcode-zipcode>
          
          

import { Zipcode, County } from 'twzipcode-vue'

...
  components: {
    TwzipcodeZipcode: Zipcode,
    TwzipcodeCounty: County
  },
  data () {
    return {
      myCounty: '臺中市',
      myZipcode: ''
    }
  }
...
          
        

<twzipcode-county id="twzipcode__county"
          v-model="myCounty"></twzipcode-county>

<twzipcode-zipcode id="twzipcode__zipcode"
           v-model="myZipcode"
           :filter-by-county="myCounty"></twzipcode-zipcode>