Skip to content
On this page

ZvInputCountry

ZvInputCountry is a standalone component

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage

Country
vue
<template>
  <ZvInputCountry
    id="input-country"
    name="input-country"
    label="Country"
    v-model="selectedCountry"
    :country-codes="countryCodes"
  />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import ZvInputCountry from '@zadigetvoltaire/ui/components/ZvInputCountry'

  const countryCodes = [
    'AE',
    'AT',
    'BE',
    'BG',
    'BL',
    'CH',
    'CN',
    'CY',
    'CZ',
    'DE',
    'DK',
    'EE',
    'ES',
    'FI',
    'FO',
    'FR',
    'GB',
    'GF',
    'GG',
    'GP',
    'GR',
    'HR',
    'HU',
    'IE',
    'IM',
    'IT',
    'JE',
    'KW',
    'LI',
    'LT',
    'LU',
    'LV',
    'MC',
    'MF',
    'MQ',
    'MT',
    'NC',
    'NL',
    'NO',
    'PF',
    'PL',
    'PM',
    'PT',
    'QA',
    'RE',
    'RO',
    'SA',
    'SE',
    'SI',
    'SK',
    'VA',
  ]

  const selectedCountry = ref('FR')
</script>