<script lang="ts" setup>
import type { ButtonProps } from "@nuxt/ui";
import type { RouteLocationNamedI18n } from "#vue-router";
// Add localePath type support if "to" is internal
type InternalProps = Omit<ButtonProps, "to" | "external"> & {
external?: false;
to?: RouteLocationNamedI18n;
};
type ExternalProps = Omit<ButtonProps, "to" | "external"> & {
external: true;
to: string;
};
const props = defineProps<InternalProps | ExternalProps>();
const localePath = useLocalePath();
const computedTo = computed(() =>
props.to && !props.external ? localePath(props.to) : props.to,
);
const { isHydrated } = useHydrationState();
</script>
<template>
<UButton
data-gtm-click="button"
v-bind="props"
:to="computedTo"
:disabled="!isHydrated || props.disabled"
>
<slot />
</UButton>
</template>
<script lang="ts" setup>
import type { ButtonProps } from "@nuxt/ui";
import type { RouteLocationNamedI18n } from "#vue-router";
// Add localePath type support if "to" is internal
type InternalProps = Omit<ButtonProps, "to" | "external"> & {
external?: false;
to?: RouteLocationNamedI18n;
};
type ExternalProps = Omit<ButtonProps, "to" | "external"> & {
external: true;
to: string;
};
const props = defineProps<InternalProps | ExternalProps>();
const localePath = useLocalePath();
const computedTo = computed(() =>
props.to && !props.external ? localePath(props.to) : props.to,
);
const { isHydrated } = useHydrationState();
</script>
<template>
<UButton
data-gtm-click="button"
v-bind="props"
:to="computedTo"
:disabled="!isHydrated || props.disabled"
>
<slot />
</UButton>
</template>