Error with scoped slot typing in Vue3 using Vite and Typescript

Question

Error with scoped slot typing in Vue3 using Vite and Typescript

I am currently working on a project using Vue3, Vite, and TypeScript as the devstack. I encountered an error related to v-slot that reads:

Element implicitly has an 'any' type because expression of type '"default"' can't be used to index type '{} | {}'.
  Property 'default' does not exist on type '{} | {}'.ts(7053)

<DataWrapper v-slot="{ values }">
  data: {{ values }}
</DataWrapper>

The DataWrapper component injects props into the slot like this:

...
<slot :values="data"></slot>
...

Although it compiles and functions correctly, the error message persists. Any suggestions on how to resolve this issue? Thank you in advance.

typescript vue.js vuejs3 vite

Answer 1

Answer №1

Have you considered incorporating type information?

<DataWrapper v-slot="{ values }: { values: any }">
  data: {{ values }}
</DataWrapper>

https://www.typescriptlang.org/docs/handbook/variable-declarations.html#property-renaming

If you're utilizing eslint, you can encapsulate the DataWrapper with

<!-- eslint-disable -->
<!-- eslint-enable -->

Answer 2

Have you considered incorporating type information?

<DataWrapper v-slot="{ values }: { values: any }">
  data: {{ values }}
</DataWrapper>

https://www.typescriptlang.org/docs/handbook/variable-declarations.html#property-renaming

If you're utilizing eslint, you can encapsulate the DataWrapper with

<!-- eslint-disable -->
<!-- eslint-enable -->

Answer 3

Answer №2

You have two choices to handle this situation:

Turn off ESLint check for the entire Vue file

/* eslint-disable  @typescript-eslint/no-explicit-any */

Convert it into a render function like so:

<template>
  <router-view
    v-slot="{Component}"
  >
    <transition
      name="fade"
      mode="out-in"
    >
      <component
        :is="Component"
        :key="$route.path"
      />
    </transition>
  </router-view>
</template>

which will be transformed to:

<template>
  <render />
</template>
<script setup lang="ts">
import {h, Transition} from "vue";
import {RouterView, useRoute} from "vue-router";
import type {VNode} from "vue";

const route = useRoute();
const render = () => {
  return h(RouterView, null, {
    default: ({Component}: {Component: VNode}) => {
      return h(Transition, {name: 'fade', mode: 'out-in'}, [
        h(Component, {key: route.path}),
      ]);
    },
  });
};
</script>

Answer 4

You have two choices to handle this situation:

Turn off ESLint check for the entire Vue file

/* eslint-disable  @typescript-eslint/no-explicit-any */

Convert it into a render function like so:

<template>
  <router-view
    v-slot="{Component}"
  >
    <transition
      name="fade"
      mode="out-in"
    >
      <component
        :is="Component"
        :key="$route.path"
      />
    </transition>
  </router-view>
</template>

which will be transformed to:

<template>
  <render />
</template>
<script setup lang="ts">
import {h, Transition} from "vue";
import {RouterView, useRoute} from "vue-router";
import type {VNode} from "vue";

const route = useRoute();
const render = () => {
  return h(RouterView, null, {
    default: ({Component}: {Component: VNode}) => {
      return h(Transition, {name: 'fade', mode: 'out-in'}, [
        h(Component, {key: route.path}),
      ]);
    },
  });
};
</script>

Error with scoped slot typing in Vue3 using Vite and Typescript

Answer №1

Answer №2

Similar questions

Utilizing NgModelGroup nesting in various components for improved data management

Is it possible to programmatically include a getter method to a class in JavaScript or TypeScript?

Build a child component with input fields the right way in VueJs

VueJS component fails to remain anchored at the bottom of the page while scrolling

Employing VUE.js for content retrieval

A function in Typescript is created to handle diverse input types in a generic manner

Error message: There appears to be a type error within the labelFunc of the KeyBoardDatePicker component in the Material-UI

Creating dynamic values in data-tables using Vuetify

What is the best way to sequentially read various sections of a file in vue.js?

Encountered an unexpected token error in react-leaflet while attempting to render the component for a unit test scenario

Implementing Class-based Dependency Injection in Express

Vue's Global mixins causing repetitive fires

How can I retrieve a Vuex data property from another Vuex data property?

The function did not execute properly, resulting in the express route returning no value

Displaying HTML content fetched from a database in Vue

Electron triggers MouseLeave event on child elements

Create typings for object properties in TypeScript

The output.library.type variable in WebPack is not defined

Angular2 Directive that Duplicates a Group of <tr> Elements

Configure Laravel application to use a specific language locale in the app.php file