Vue component with annotation

[EmilienLeroy]

Hi,

I use vue with typescript and annotations. I use these lib for the annotations :

• component : https://github.com/kaorun343/vue-property-decorator
• vuex : https://github.com/ktsn/vuex-class

When I run jsdoc, an error appear :

This is my jsdoc config :

{
  "tags": {
      "allowUnknownTags": true
  },
  "source": {
      "include": ["./src"],
      "includePattern": "\\.(js|jsx|ts|tsx|vue)$"
  },
  "plugins": [
      "plugins/markdown",
      "node_modules/better-docs/typescript",
      "node_modules/better-docs/category",
      "node_modules/better-docs/component"
  ],
  "opts": {
      "encoding": "utf8",
      "destination": "docs/",
      "recurse": true,
      "verbose": true,
      "readme": "./readme.md",
      "template": "node_modules/better-docs"
  },
  "templates": {
      "better-docs": {
          "name": "Kami-performance"
      }
  }
}

When i remove vue from this line :

"includePattern": "\\.(js|jsx|ts|tsx)$"

This work perfectly with all my ts files. i'dont know if this trouble is due at the annotation or at my vue files with typescript.

Version

• jsdoc : 3.6.3
• better-docs : 1.4.7
• typescript : 3.5.3
• vue : 2.6.10

[EmilienLeroy]

For example, my app component with typescript and annotations :

<template>
  <div>
    <v-app id="app">
      <transition :name="transitionName" mode="in-out">
        <router-view></router-view>  
      </transition>  
    </v-app>
    <notifications-vue></notifications-vue>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator';
import NotificationsVue from '@/components/Notifications.vue';
import { Location } from 'vue-router';

/**
 * @component
 */
@Component({
  components: {
    NotificationsVue,
  },
})
export default class App extends Vue {
  /**
   * @property {string} transitionName - name of the transition for the route
   */
  private transitionName: string = '';

  /**
   * This method will set the transition to use depending on the new route.
   * @param {Location} to - to this route
   * @param {Location} from - from this route
   * @returns {void}
   */
  @Watch('$route')
  public switchTransition(to: Location, from: Location): void {
    if (from.path === '/login' || to.path === '/login') {
      if (from.path === '/login') this.transitionName = 'slide-top';
      if (to.path === '/login') this.transitionName = 'slide-bottom';
    } else {
      this.transitionName = '';
    }
  }

}
</script>