Composable not defined

Hi everyone, I am new to nuxt and playing around with a simple project. I've created a composable:

export const useRegions = () => {
    return [{
        slug: "region1",
        path: "/region1",
        title: "region1"
    },
    {
        slug: "region2",
        path: "/region2",
        title: "region2"
    }
    ]
}

export const useRegions = () => {
    return [{
        slug: "region1",
        path: "/region1",
        title: "region1"
    },
    {
        slug: "region2",
        path: "/region2",
        title: "region2"
    }
    ]
}

and using it without issue in a page like:

<script setup>
const regions = useRegions();
</script>

<script setup>
const regions = useRegions();
</script>

I created another composable:

const route = useRoute();

export const useBodyWork = () => {
    return [{
        slug: "massage",
        path: `${route.fullPath}/massage/deals`,
        title: "Massage"
    },
    {
        slug: "acupressure",
        path: `${route.fullPath}/acupressure/deals`,
        title: "Acupressure"
    }
    ]
}

const route = useRoute();

export const useBodyWork = () => {
    return [{
        slug: "massage",
        path: `${route.fullPath}/massage/deals`,
        title: "Massage"
    },
    {
        slug: "acupressure",
        path: `${route.fullPath}/acupressure/deals`,
        title: "Acupressure"
    }
    ]
}

and attempting to use in another page like:

<script setup>
const bodyworks = useBodywork();
</script>

<script setup>
const bodyworks = useBodywork();
</script>

But I get a 500 error -> useBodywork is not defined? If I right click in the editor "go to definition" vs code correctly navigates to the composable??

Composable not defined

Hi everyone, I am new to nuxt and playing around with a simple project. I've created a composable:

export const useRegions = () => {
    return [{
        slug: "region1",
        path: "/region1",
        title: "region1"
    },
    {
        slug: "region2",
        path: "/region2",
        title: "region2"
    }
    ]
}

export const useRegions = () => {
    return [{
        slug: "region1",
        path: "/region1",
        title: "region1"
    },
    {
        slug: "region2",
        path: "/region2",
        title: "region2"
    }
    ]
}

and using it without issue in a page like:

<script setup>
const regions = useRegions();
</script>

<script setup>
const regions = useRegions();
</script>

I created another composable:

const route = useRoute();

export const useBodyWork = () => {
    return [{
        slug: "massage",
        path: `${route.fullPath}/massage/deals`,
        title: "Massage"
    },
    {
        slug: "acupressure",
        path: `${route.fullPath}/acupressure/deals`,
        title: "Acupressure"
    }
    ]
}

const route = useRoute();

export const useBodyWork = () => {
    return [{
        slug: "massage",
        path: `${route.fullPath}/massage/deals`,
        title: "Massage"
    },
    {
        slug: "acupressure",
        path: `${route.fullPath}/acupressure/deals`,
        title: "Acupressure"
    }
    ]
}

and attempting to use in another page like:

<script setup>
const bodyworks = useBodywork();
</script>

<script setup>
const bodyworks = useBodywork();
</script>

But I get a 500 error -> useBodywork is not defined? If I right click in the editor "go to definition" vs code correctly navigates to the composable??

Composable not defined

Composable not defined

Similar Threads