migrating from rc.11 to stable

[frail pelican]

Hi, I'm in the process of migrating from rc.11 to stable, and to node v18.12.1.

I've gone through all the breaking changes posted on github (I think), so I think I'm mostly up to date.

I can get the app to load and render a simple blank page, and I can directly hit all my server api's via my browser, and they return the expected results, so the basics all seem to work.

What doesn't seem to work are my composables.

My composables use $fetch to make calls to the server api, and then store the results in a ref.

What's happening is that the invocation of these composables are returning undefined variables.

I suspect something changed between rc.11 and stable in terms of either how composables work, or how fetch is configured.

Some clarifying q's:

1. The docs show that composables are typescript by default, but I assume it doesn't matter if these are .js files?

2. If relying on refs for state and have not been using useState. I vaguely recall some folks saying this is bad.

3. Is there something syntactically that changed?

Here's roughly what all my composables look like today:

import { useNuxtApp } from '#app';
import {ref} from 'vue';

const foo = ref({})

export default function (){

    let { $axios } = useNuxtApp()
    const axios = $axios()
     
    const getFoo = async () => {
      
      try {
      
        const {data:item} = await $fetch('/api/items', { 
                transform: (r) => {
                    return r.data
                }
            })

        foo.value = item    

        } catch (error) {}
    } 
    
    return {
        foo,
        getFoo
    }
}

Thanks in advance for any help!

[frail pelican]

ok, weird, I think I figured a few things out. 1. the transform param is doing nothing so I might as well delete it. 2. in some cases I needed to replace export default function() with export const useFoo = () => { and that fixed it. However, not all composables required that I do this and I'm not clear why some did and others do not.

[strange light]

In your code above you have axios but then use $fetch… you don’t need axios at all.

You also don’t need to import useNuxtApp - it’s auto-imported

Or ref from Vue

So… really this is all you need…

<script setup>
const foo = ref({})
const {data: item} = await $fetch('/api/items’)
foo.value = item 
</script>

If it’s just a composable, then just export the response of $fetch

[frail pelican]

@strange light awesome thank you! I'm still getting up to speed on js generally speaking and have a lot of sloppy code. 🙏