Skip to content

Support for Vue.js script setup syntax #1604

Open
@mustafadalga

Description

@mustafadalga

Issue:

I have encountered a problem where documentation.js is not able to generate documentation for Vue components when using the script setup syntax. However, it works correctly for traditional Vue components using <script lang="ts">.

The code snippet below is an example of a Vue component that documentation.js correctly generates documentation for:

<script lang="ts">
/**
 * A simple button component
 * @constructor Button
 */

/**
 * props variables
 *
 * @property {string} color - background color of the button
 * @property {number} width - button width
 * @property {number} height - button height
 * @property {Function} sum - sum function that takes x and y and returns the sum of x and y
 */
const props = defineProps({
  color: {
    type: String,
    required: true,
  },
  width: Number,
  height: Number,
  sum: {
    type: Function,
    required: true,
  },
});

/**
 * This method logs the input parameters to the console.
 * @param {string} text - user text input
 */
function summarize(text) {
  console.log("summarization...");
}

/**
 * The function
 * @param {number} x - one input number
 * @returns {number} This is the result
 */
function increase(x) {
  return x + 1;
}
</script>

However, when the same Vue component is written with the script setup syntax, documentation.js is unable to generate documentation:

<script setup lang="ts">
/**
 * A simple button component
 * @constructor Button
 */

/**
 * props variables
 *
 * @property {string} color - background color of the button
 * @property {number} width - button width
 * @property {number} height - button height
 * @property {Function} sum - sum function that takes x and y and returns the sum of x and y
 */
const props = defineProps({
  color: {
    type: String,
    required: true,
  },
  width: Number,
  height: Number,
  sum: {
    type: Function,
    required: true,
  },
});

/**
 * This method logs the input parameters to the console.
 * @param {string} text - user text input
 */
function summarize(text) {
  console.log("summarization...");
}

/**
 * The function
 * @param {number} x - one input number
 * @returns {number} This is the result
 */
function increase(x) {
  return x + 1;
}
</script>

Expected Output:
I expected documentation.js to generate the same documentation as it does for the traditional script syntax, including documentation for props, methods, and any additional jsdoc/tsdoc comments.

I believe the issue lies in the lack of support for the Vue.js script setup syntax. I'd appreciate it if the support for this syntax could be added to the tool. Thank you!

Environment:

What version of documentation.js are you using?: 14.0.2
How are you running documentation.js (on the CLI, Node.js API, Grunt, other?): CLI
Node.js version: v19.9.0
Vue version: 3.2.45
TypeScript version: 4.7.4
OS: macOS

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