Vue Adapter

The Vue Adapter provides framework-specific integration for the @cellarnode/beverage-utils library, enabling Vue 3 developers to easily fetch, cache, and utilize beverage classification data. It leverages TanStack Vue Query to manage asynchronous state and provide a reactive interface for beverage label mapping.

Sources: README.md:14, package.json:63, src/vue/use-beverage-label-map.ts:1-20

Core Composable and Query Options

The adapter's primary functionality is encapsulated in a Vue composable and a set of query options that define how classification data is retrieved from the CellarNode API.

beverageLabelMapOptions(apiBaseUrl: string)

This function returns a configuration object compatible with TanStack Query. It defines the fetching logic, query keys, and caching behavior.

• Fetching Logic: It performs a fetch request to ${apiBaseUrl}/api/v1/classifications/beverage-types.
• Caching: It sets staleTime: Infinity because beverage classifications are considered static data that rarely changes.
• Data Transformation: The raw API response is passed through buildLabelMap to generate a lookup map with composite keys for disambiguation.

Sources: src/vue/use-beverage-label-map.ts:7-22, README.md:17-21

useBeverageLabelMap(apiBaseUrl: string)

This is the standard Vue composable (hook) used within components. It calls useQuery internally with the options provided by beverageLabelMapOptions.

The diagram shows the data flow from a Vue component through the adapter to the external API and back.

Sources: src/vue/use-beverage-label-map.ts:24-26, src/label-map.ts:5-15

Data Flow and Integration

The Vue Adapter acts as a bridge between the core TypeScript utilities and the Vue reactivity system. It specifically integrates with buildLabelMap to transform raw classification data into a flattened LabelMap.

Sequence of Classification Loading

This sequence illustrates the lifecycle of a classification request initiated by a Vue component.

Sources: src/vue/use-beverage-label-map.ts:10-20, README.md:111-115

Usage with Core Formatters

While the adapter handles data fetching, it is designed to be used in conjunction with core formatting functions like formatBeverageType and formatBeverageLabel.

import { useBeverageLabelMap } from "@cellarnode/beverage-utils/vue";
import { formatBeverageType } from "@cellarnode/beverage-utils";

// Inside a Vue component
const { data: labelMap } = useBeverageLabelMap("https://api.cellarnode.com");
const label = computed(() => formatBeverageType("wine", "red", labelMap.value));

Sources: src/format.ts:13-22, README.md:111-115

Dependencies

The Vue adapter requires specific peer dependencies to function. If these are not present in the host project, the adapter will fail to initialize.

Sources: package.json:57-58

The Vue Adapter simplifies the integration of CellarNode's beverage classification system into Vue applications by providing a pre-configured, cached, and reactive data fetching mechanism that integrates seamlessly with the library's core formatting utilities.