fix: add missing lang=ts for correct slot props types

[RobertHaba]

Problem No type suggestions when use slot props

Solution Add lang="ts" for component script tag

Test Clone demo from readme https://github.com/atinux/nuxt-todos-edge

• Add in app.vue AuthState component with use slot props

...
    <AuthState v-slot="userSession">
      {{ userSession}}
    </AuthState>

    <NuxtPage />
...

• pnpm i

• pnpm dev

• check userSession type (in AuthState component) -> any

• go manually into AuthState component and add lang="ts" in <script

• remove .nuxt, run pnpm dev and reload ts server/ window (ctrl+shift+p >Developer:reload window)

• Check userSesstion type

I also think that the documentation is not entirely correct because you need to use loggedIn.value instead of loggedIn.

[RobertHaba]

Fix for readme

Possible correction to the readme

<template>
  <header>
    <AuthState v-slot="{ loggedIn, clear }">
      <button v-if="loggedIn.value" @click="clear">Logout</button>
      <NuxtLink v-else to="/login">Login</NuxtLink>
    </AuthState>
  </header>
</template>

If the page is cached or prerendered, nothing will be rendered until the user session is fetched on the client-side.

You can use the placeholder slot to show a placeholder on server-side and while the user session is being fetched on client-side for the prerendered pages:

<template>
  <header>
    <AuthState>
      <template #default="{ loggedIn, clear }">
        <button v-if="loggedIn.value" @click="clear">Logout</button>
        <NuxtLink v-else to="/login">Login</NuxtLink>
      </template>
      <template #placeholder>
        <button disabled>Loading...</button>
      </template>
    </AuthState>
  </header>
</template>

[atinux]

Thanks, I fixed the usage in the v-bind and it the example should now work!