Installation

npm i @tryg/vue-ui-library

Usage

Install the component library as a Vue plugin. This globally registers all Anchor components.

main.js

import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');

YourComponent.vue

<template>
  <anchor-country-code dial-code="+45" iso="DK" name="Denmark"></anchor-country-code>
</template>

Import only the components you need for optimal bundle size.

YourComponent.vue

<script setup>
import { AnchorCountryCode } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-country-code dial-code="+45" iso="DK" name="Denmark"></anchor-country-code>
</template>

Display Options

The showName prop controls whether the country name is displayed alongside the dial code. By default it is true. Set it to false to display only the dial code.

Vue component

<template>
  <anchor-country-code dial-code="+45" iso="DK" name="Denmark" :show-name="false"></anchor-country-code>
</template>

When the country name is hidden using showName={false}, ensure the country identifier is still conveyed to assistive technologies. Consider adding an aria-label that includes both the country name and dial code so screen readers can properly communicate the selected country.

API

anchor-country-code

Properties

Property	Attribute	Type	Default
`dialCode`	`dial-code`	`string`	`undefined`
`iso`	`iso`	`string`	`undefined`
`name`	`name`	`string`	`undefined`
`showName`	`show-name`	`boolean`	`true`

Dependencies

Used by

anchor-phone

Graph

graph TD;
  anchor-phone --> anchor-country-code
  style anchor-country-code fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

Country Code4.0