JSDoc-vue produces multiple doclets

[alexisread]

I'm trying to use Sphinx-js alongside JSDoc-vue, to document vue components. This works bar a multiple doclets conflict as shown in the error dump below. It appears to duplicate the doclets at some step, and wondered if I was doing something wrong, or if this is a case of ignoring the errors as per #116 ?
Thanks

test.vue:
<template>
  <div>
    {{ counter }}
  </div>
</template>

<script>
/**
 * @vue-data {Number} [counter=0] Counter value
 */
export default {
  name: 'Counter',
  data() {
    return {
      counter: 0,
    };
  },
  mounted() {
    this.interval = setInterval(() => this.increment(), 1000);
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  methods: {
    /**
     * Increment the internal counter.
     */
    increment() {
      this.counter += 1;
    }
  }
};
</script>

Error dump:
Running Sphinx v2.2.0

/venv/lib/python3.7/site-packages/sphinx_js/doclets.py(51)gather_doclets()
-> raise PathsTaken(conflicts)
(Pdb) doclets
[{'comment': '/\n * @vue-data {Number} [counter=0] Counter value\n */', 'meta': {'range': [57, 411], 'filename': 'test.vue', 'lineno': 5, 'columnno': 0, 'path': '/src/src/components', 'code': {'id': 'astnode100009758', 'name': 'module.exports', 'type': 'ObjectExpression'}}, 'tags': [{'originalTitle': 'vue-data', 'title': 'vue-data', 'text': '{Number} [counter=0] Counter value', 'value': '{Number} [counter=0] Counter value'}], 'name': 'exports', 'longname': 'module.exports', 'kind': 'member', 'memberof': 'module', 'scope': 'static'}, {'comment': '/\n * Increment the internal counter.\n */', 'meta': {'range': [360, 404], 'filename': 'test.vue', 'lineno': 22, 'columnno': 4, 'path': '/src/src/components', 'code': {'id': 'astnode100009796', 'name': 'increment', 'type': 'FunctionExpression'}, 'vars': {'this.counter': 'module.exports.methods.increment#counter'}}, 'description': '

Increment the internal counter.

', 'name': 'increment', 'longname': 'module.exports.methods.increment', 'kind': 'function', 'memberof': 'module.exports.methods', 'scope': 'static'}, {'comment': '/\n * @vue-data {Number} [counter=0] Counter value\n */', 'meta': {'range': [57, 411], 'filename': 'test.vue', 'lineno': 5, 'columnno': 0, 'path': '/src/src/components', 'code': {'id': 'astnode100021013', 'name': 'module.exports', 'type': 'ObjectExpression'}}, 'tags': [{'originalTitle': 'vue-data', 'title': 'vue-data', 'text': '{Number} [counter=0] Counter value', 'value': '{Number} [counter=0] Counter value'}], 'name': 'exports', 'longname': 'module.exports', 'kind': 'member', 'memberof': 'module', 'scope': 'static'}, {'comment': '/\n * Increment the internal counter.\n */', 'meta': {'range': [360, 404], 'filename': 'test.vue', 'lineno': 22, 'columnno': 4, 'path': '/src/src/components', 'code': {'id': 'astnode100021051', 'name': 'increment', 'type': 'FunctionExpression'}, 'vars': {'this.counter': 'module.exports.methods.increment#counter'}}, 'description': '

Increment the internal counter.

', 'name': 'increment', 'longname': 'module.exports.methods.increment', 'kind': 'function', 'memberof': 'module.exports.methods', 'scope': 'static'}]
(Pdb) c

Exception occurred:
File "/venv/lib/python3.7/site-packages/sphinx_js/doclets.py", line 51, in gather_doclets
raise PathsTaken(conflicts)
sphinx_js.doclets.PathsTaken: Your JS code contains multiple documented objects at each of these paths:

./test.module.exports
./test.module.exports.methods.increment

We won't know which one you're talking about. Using JSDoc tags like @Class might help you differentiate them.
The full traceback has been saved in /tmp/sphinx-err-zubmk0hc.log, if you want to report the issue to the developers.
Please also report this if it was a user error, so that a better error message can be provided next time.
A bug report can be filed in the tracker at https://github.com/sphinx-doc/sphinx/issues. Thanks!
make: *** [Makefile:20: text] Error 2

[erikrose]

Well, the doclet with range [360, 404], for example, has 2 doclets that (by eye) differ only by their AST node (astnode100021051 vs. astnode100009796). I don't see what you could be doing wrong, so it's down to some weirdness of JSDoc-vue or jsdoc itself. When #116 is merged, you should be all set. Thanks for drawing my attention back to #116; it looks like the author has fixed the last few niggles, but GitHub didn't notify me!

[colin-guyon]

Hi @alexisread , can you document your Vue code without troubles even if #116 seems not yet merged ?
I'm interested as I'm currently trying to choose a framework to document a JS project with some Vue stuff in it, and sphinx-js is interesting, but only if we can also document our Vue components.
Thanks !

[alexisread]

Sorry for the delay, this was only exploratory, not fully developed so I had to check the latest versions (sphinx 3.5.4, jsdoc 3.6.6, jsdoc-vuejs 3.0.9), to see if it was still a problem (It is).
The main docs I've been consulting are:
https://pypi.org/project/sphinx-js/
https://jsdoc.app/about-configuring-jsdoc.html
https://www.npmjs.com/package/jsdoc-vuejs
https://github.com/Kocal/jsdoc-vuejs/blob/master/example/src/Counter.vue

I've attached the config files for sphinx and jsdoc, they should be able to get you up and running.
The below is the same directory as your sphinx docs
/mnt/example/src/doc/conf.py
conf.py.txt

The below is the same directory as your package.json
/mnt/example/src/conf.json
conf.json.txt

Then in your js files you can reference functions, for instance:
.. js:autofunction:: AuthNFilter

The vue files are more problematic. From the docs https://github.com/mozilla/sphinx-js only the following tags are recognized:
@param, @returns, @throws, @example (without the optional ), @deprecated, @see
however I've found that if you put @method in the function docstrings, you can pull them from the vue files.

Sample vue file
/mnt/example/src/src/components/test.vue
test.vue.txt

So then you can simply add functions in say index.rst like:
.. js:autofunction:: checkb

Hope this is useful.

[colin-guyon]

Great @alexisread thank you for taking time to check the current status and answer.
I'm not fully on my documentation task for now but I will follow your instructions hopefully in a few days and tell you whether things go well.
Thanks :)

[alexisread]

Hi, sorry one slight clarification as I put in the wrong links:
I'm using jsdoc-vue, not jsdoc-vuejs, so the github page is:
https://github.com/QingWei-Li/jsdoc-vue
and example:
https://github.com/QingWei-Li/jsdoc-vue/tree/master/example