How can I use definePage in vue3 .jsx to change route meta config?

[whoooami]

i tried add it inside 1 or 2 position, but doesn't work.

import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'
import { definePage } from 'vue-router/auto'

export default defineComponent({
  setup() {
    // your setup code here

// 1 position.
//definePage({
//  name: 'index',
//  meta: {
//    layout: 'home'
//  }
//})

    const user = useUserStore()
    const name = ref(user.savedName)

    // eslint-disable-next-line unused-imports/no-unused-vars
    const route = useRoute()
    const router = useRouter()
    function go() {
      if (name.value)
        router.push(`/hi/${encodeURIComponent(name.value)}`)
    }

    const { t } = useI18n()
    return () => (
      <>
        <div>
          <div text-4xl>
            <div i-carbon-campsite inline-block />
          </div>
        </div>
      </>
    )
  },
})

// 2 position.
definePage({
  name: 'index',
  meta: {
    layout: 'home'
  }
})

[posva]

the definePage() macro only works with SFC, so you need to transform your jsx file to a vue file that has <script setup lang="tsx">

[posva]

Although, this is supported in Nuxt so I guess we might need to support it too

[whoooami]

Thx. Glad to hear about this thought.

[posva]

#315