NuxtN
Nuxt•2y ago
Cry0nicS

Pass URL query params to href

I have a button with a link that looks like this
<Button
    :href="$t('cta.button.url')"
    size="xl"
    variant="primary">
    {{ $t("cta.button") }}
</Button>


I want to read all the query params from this page and pass them along to this href.

I tried something like
<script lang="ts">
const {t} = useI18n();
const route = useRoute();
const query = route.query;

const buttonUrl = computed(() => {
    // Get the base URL from translations
    const baseUrl = t('cta.button.url');
    // Convert the route query parameters to a query string
    const queryString = new URLSearchParams(query).toString();

    // Return the full URL, appending the query string if it exists
    return queryString ? `${baseUrl}?${queryString}` : baseUrl;
});
</script>

However, the URLSearchParams doesn't take a LocationQuery (that is being return from route.query).

What's the best way to sort this out?
Was this page helpful?