We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
defineComponent
Module does not retrieve slots when a component defines with defineComponent or anything beside <script setup lang="ts">
<script setup lang="ts">
It is strange behavior because for these kinds of components props are fine, but slots are missing.
props
@stafyniaksacha Do you have an idea about this issue?
For example, when we have this component:
<template> <div> <h1>Title</h1> <p> <slot /> </p> </div> </template> <script> import { defineComponent } from 'vue' export default defineComponent({ name: 'TextDefine', props: { title: { type: String, default: 'Title' } } }) </script>
The result will be:
{ "mode": "all", "prefetch": false, "preload": false, "filePath": "components/TextDefine.vue", "pascalName": "TextDefine", "kebabName": "text-define", "chunkName": "components/text-define", "shortPath": "components/TextDefine.vue", "export": "default", "priority": 1, "fullPath": "/Users/far/projects/nuxt/nuxt-component-meta/playground/components/TextDefine.vue", "meta": { "type": 1, "props": [ { "name": "title", "global": false, "description": "", "tags": [], "required": false, "type": "string | undefined", "declarations": [ { "file": "/Users/far/projects/nuxt/nuxt-component-meta/playground/components/TextDefine.vue", "range": [ 209, 266 ] } ], "schema": { "kind": "enum", "type": "string | undefined", "schema": [ "undefined", "string" ] }, "default": "\"Title\"" } ], "slots": [], "events": [], "exposed": [ { "name": "title", "type": "string", "description": "", "declarations": [ { "file": "/Users/far/projects/nuxt/nuxt-component-meta/playground/components/TextDefine.vue", "range": [ 209, 266 ] } ], "schema": "string" } ], "tokens": [] } }
But with:
<template> <div> <h1>Title</h1> <p> <slot /> </p> </div> </template>
The output is:
{ "mode": "all", "prefetch": false, "preload": false, "filePath": "components/TextDefine.vue", "pascalName": "TextDefine", "kebabName": "text-define", "chunkName": "components/text-define", "shortPath": "components/TextDefine.vue", "export": "default", "priority": 1, "fullPath": "/Users/far/projects/nuxt/nuxt-component-meta/playground/components/TextDefine.vue", "meta": { "type": 1, "props": [], "slots": [ { "name": "default", "type": "{}", "description": "", "declarations": [], "schema": { "kind": "object", "type": "{}", "schema": {} } } ], "events": [], "exposed": [ { "name": "$slots", "type": "Readonly<InternalSlots> & { default?(_: {}): any; }", "description": "", "declarations": [ { "file": "/Users/far/projects/nuxt/nuxt-component-meta/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.d.ts", "range": [ 8316, 8343 ] } ], "schema": { "kind": "object", "type": "Readonly<InternalSlots> & { default?(_: {}): any; }", "schema": { "default": { "name": "default", "global": false, "description": "", "tags": [], "required": false, "type": "((_: {}) => any) | undefined", "declarations": [], "schema": { "kind": "enum", "type": "((_: {}) => any) | undefined", "schema": [ "undefined", { "kind": "event", "type": "(_: {}): any", "schema": [] } ] } } } } } ], "tokens": [] } }
The text was updated successfully, but these errors were encountered:
Does it work if you define the slot in defineComponent ? (ref)
<template> <div> <h1>Title</h1> <p> <slot /> </p> </div> </template> <script lang="ts"> import { defineComponent, type SlotsType } from 'vue' export default defineComponent({ name: 'TextDefine', slots: Object as SlotsType<{ default: {} }>, props: { title: { type: String, default: 'Title' } } }) </script>
Sorry, something went wrong.
Just tried it and it works 👍 So for defineComponent slots should be defined inside script?
No branches or pull requests
Module does not retrieve slots when a component defines with
defineComponent
or anything beside<script setup lang="ts">
It is strange behavior because for these kinds of components
props
are fine, but slots are missing.@stafyniaksacha Do you have an idea about this issue?
For example, when we have this component:
The result will be:
But with:
The output is:
The text was updated successfully, but these errors were encountered: