Skip to content
New issue

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

Slot are missing using defineComponent #62

Open
farnabaz opened this issue Dec 11, 2023 · 2 comments
Open

Slot are missing using defineComponent #62

farnabaz opened this issue Dec 11, 2023 · 2 comments

Comments

@farnabaz
Copy link
Collaborator

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:

<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": []
    }
  }
@stafyniaksacha
Copy link
Collaborator

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>

@farnabaz
Copy link
Collaborator Author

Just tried it and it works 👍
So for defineComponent slots should be defined inside script?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants