UseCountryRegions(id?: string)

The UseCountryRegions() composable allows for fetching and storing Regions defined for a specific country.

Be careful about shared state

You should pass a unique id as a parameter to avoid state conflicts when using multiple instances of this composable. Every instance with the same id (or those that lack it) will share the same state, even on different pages.


Main data object populated by the load() method.


const regions: ComputedProperty<Region[]>

References: Region


Indicates whether any of the composable methods is in progress.


const loading: ComputedProperty<UseCountryRegionsLoading>;

References: UseCountryRegionsLoading


Contains errors thrown by any of the composable methods.


const error: ComputedRef<UseCountryRegionsError>;

References: UseCountryRegionsError


Fetches a list of regions from the API and saves them to the regions property. Under the hood, it sends a request to the getCountryRegions API endpoint.


interface LoadCountryRegionsProps extends BaseProps {
  countryIsoCode: string;

async function load(props: LoadCountryRegionsProps): Promise<void>;

References: LoadCountryRegionsProps, BaseProps


In the following example, we are creating two instances of the UseCountryRegions() composable. One of them fetches and stores regions defined for GB (Great Britain) and the other one - for PL (Poland).

import { UseCountryRegions } from '@vsf-enterprise/sapcc';
import { onMounted } from '@nuxtjs/composition-api';

export default {
  setup() {
    const {
      regions: regionsGb,
      load: loadRegionsGb
    } = UseCountryRegions('gb');
    const {
      regions: regionsPl,
      load: loadRegionsPl
    } = UseCountryRegions('pl');

    onMounted(async () => {
      await loadRegionsGb({ countryIsoCode: 'gb' });
      await loadRegionsPl({ countryIsoCode: 'pl' });

    return { regionsGb, regionsPl };