Skip to content

[ISSUE] New setup syntax not supported #19

Open
@Paul7Peterson

Description

@Paul7Peterson

Trying to use the plugin with the setup syntax of Vue 3, I found that the properties are not shown in Zeplin.

I'm refining also the component name in a separated <script> as it's said in the docs

Here's an example on the SFC:

<script lang="ts">
  export default {
    name: 'AppButton',
    inheritAttrs: false,
    customOptions: {}
  }
</script>

<script lang="ts" setup>
interface AppButtonProps {
  /** ... */
  type: 'primary' | 'secondary';
  /** ... */
  disabled: boolean;
}

withDefaults(defineProps<AppButtonProps>(), {
  disabled: false
})
</script>

<template>
  <button
    class="btn"
    :class="[type]"
    :disabled="disabled"
  >
    <slot>AppButton</slot>
  </button>
</template>

And here is the output:

image

Reverse the position of the <script> tags has no effect.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions