type guard on <template> for a named slot is not recognized

[schl3ck]

When a type guard is used on a <template> for a named slot (also the default slot), then it is not recognized in the slot content.

A simple example:

<template>
  <MyComponent>
    <template v-if="status" #default>
      {{ status.message }}
    </template>
  </MyComponent>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import MyComponent from "./MyComponent.vue";

const status = ref<{ message: string } | undefined>();
loadStatus();
async function loadStatus() {
  // load it from somewhere
}
</script>

This example assumes that MyComponent exists and behaves differently depending on if the default slot is available or not. Because of this the v-if can't be moved anywhere else.

TypeScript complains though that status in {{ status.message }} can be undefined. Duplicating the template element without #default solves the issue but looks odd in the template and serves no other pupose.

[johnsoncodehk]

Thanks for the report, this is a similar problem to vuejs/core#3498.

[NateScarlet]

This seems been fixed in 0.34.9 (or earlier), but come back again in 0.34.12

[johnsoncodehk]

@NateScarlet we have never fix this. 😅 I guess your case it is a side effect by fixed #1264.

[mdoesburg]

@johnsoncodehk Can/will this be fixed? Can you make a "special case" fix for this as suggested here: vuejs/core#3498 (comment)

[johnsoncodehk]

@johnsoncodehk Can/will this be fixed? Can you make a "special case" fix for this as suggested here: vuejs/core#3498 (comment)

We can't because the situation is much more complicated.

[johnsoncodehk]

We refactored the template codegen and now find a simple workaround.