Full example based on v1.0

[MartinConde]

I realize I might just be braindead right now but I just can't figure out how to pass the block array I get from sanity into

...
setup() {
    const blocks = [...];
...

Total vue noob, just figured I'd give it a try coming from react/gatsby so I'm most likely overlooking something obvious here. I've tried looking through all the vue/gridsome + sanity starters and repos I could find but they all use v0.1.0 of sanity-blocks-vue-component which seems to handle things a little differently.

Basically I'd just like to see a complete example or an updated starter if anyone has the time and patience for a vue noob ;)

[matthieudou]

For fetching data in vue 3, the easiest way is to create an async setup function. You can use a ref for reactive variables. Here is a more complete example.

import { ref } from 'vue'
import sanityClient from '../sanityClient'

export default {
  async setup () {
    const blocks = ref([])
    const response = await sanityClient('*[xxx]')
    blocks.value = response.content // if your main portable text content has the name content
    return {
      blocks
    }
  }
}

[MartinConde]

@matthieudou Thanks! :) That makes a lot of sense and works. Now I guess I just gotta get to grips with gridsome a little more since there, I get the data from the source plugin but somehow have trouble accessing it inside the function that needs it

[matthieudou]

@MartinConde I don't work with gridsome so I can't really help you with that, but you need to make sure that Gridsome is compatible with Vue3 as the "setup" hook is new to vue 3. I also think that the sanity package here is limited to vue 3 https://github.com/rdunk/sanity-blocks-vue-component#install

[MartinConde]

@matthieudou Ok facepalm moment haha, should have checked on that before. For whatever reason I just assumed it would be using vue3 but glancing over some related issues it seems like not yet or at least not really. Will try with the legacy vue2 version which will probably work right out of the gate. Thanks again! :)