Error when using Route Query Parameters in Nuxt/Vue Template with TypeScript

Issue

I'm working on a Nuxt.js project with TypeScript and encountering an issue with route query parameters. Specifically, TypeScript is giving me a type error related to a route query parameter named userType.

The issue arises when I try to pass userType as a query parameter in a NuxtLink component:

<NuxtLink
    :to="localePath({ name: 'account-upload-images', query: { userType: retrievedUserType } })"
    class="skip-for-now"
>
    {{ $t('sign_up.cta.skip_for_now.label') }}
</NuxtLink>

Here, retrievedUserType is a computed property that I expect to be a string. The error occurs on this line, stating: "Type 'unknown' is not assignable to type 'string | (string | null)[] | null | undefined'."

I have a function getSignedUpAs that reliably returns a string and is used to set the userType route query parameter:

const getSignedUpAs = (): string => {
    return formData.signed_up_as.split('--')[0];
};

const userType = getSignedUpAs();

router.push({
    name: 'account-instagram-approval',
    query: { userType: userType },
});

In the account-instagram-approval component, I attempt to retrieve userType from the route query:

<script lang="ts">
import { computed, defineComponent, ref, useRoute } from 
'@nuxtjs/composition-api';

    export default defineComponent({
        name: 'account-instagram-approval',
        setup() {
            const route = useRoute();
       const retrievedUserType = computed(() => {
            return route.value.query.userType as string;
        });
    
            return { retrievedUserType };
        },
    });
    </script>

Despite these attempts, I'm still facing the same TypeScript error. I've tried multiple solutions, including:

1. Explicit type casting using as string.
2. Initializing retrievedUserType with an empty string and then conditionally assigning it based on the route query.
3. Using a computed property to return the route query parameter as a string.

I need to ensure that retrievedUserType is treated as a string within the component. Could someone help me understand why I'm getting this TypeScript error and how to resolve it? Any insights or alternative approaches to handle route query parameters with TypeScript in Nuxt/Vue would be greatly appreciated.

I have noticed that if I add the type in my template:

<NuxtLink
    :to="localePath({ name: 'account-upload-images', query: { userType: retrievedUserType as string } })"
    class="skip-for-now"
>
    {{ $t('sign_up.cta.skip_for_now.label') }}
</NuxtLink>

Visual Studio Code won't shout at me but when I run the app I will get this error:

Errors compiling template:

invalid expression: Unexpected identifier in

localePath({ name: 'account-upload-images', query: { userType: retrievedUserType as string } })

And I can understand why that's happening but if I'm casting my query param as string literally everywhere why do TS still cast the query param as "unknown".

Solution

The way I resolved this is that instead of using the route query directly on the template I created an event on the NuxtLink and built the route to re-direct there:

    <NuxtLink :to="uploadImagesLink" class="skip-for-now">
        {{ $t('sign_up.cta.skip_for_now.label') }}
    </NuxtLink>

And the method:

    const uploadImagesLink = computed(() => {
        return context.root.localePath({
            name: 'account-upload-images',
            query: { userType: userType.value },
        });
    });

Still trying to figure out why TS is giving so many problems with this kind of implementation while using the query parameters on the template.

Answered By - Lowtrux