ESLint vue/no-unused-components conflict with components in markdown

[bencodezen]

Problem

Since Nuxt allows components to import individual components that a markdown file will use (instead of registering all components in a markdown file globally), this is causing a small problem since anyone using the ESLint-Vue will get an error because technically it doesn't exist inside the component template (but it does exist in the markdown).

Example

<!-- content/article.md -->
# My Article Title

Here is my text and a demo of my concept:

<my-demo></my-demo>

<!-- index.vue -->
<script>
import MyDemo from '~/components/MyDemo.vue'

export default {
  components: { 
    MyDemo
  },
  async asyncData({ $content }) {
    const page = await $content.path('article').fetch()

    return { page }  
  }
}
</script>

<template>
  <main>
    <nuxt-content :document="page" />
  </main>
</template>

This will throw the error:

ERROR in ./pages/workshops/index.vue
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):

/Users/bencodezen/Projects/bencodezen/pages/index.vue
  8:5  error  The "MyDemo" component has been registered but not used  vue/no-unused-components

✖ 1 problem (1 error, 0 warnings)

Temporary Workaround

I've worked around this temporarily by disabling the rule on that page with

/* eslint-disable vue/no-unused-components */

but this feels hacky at best.

Next Steps

I wonder if there's a way to detect that a component is going to be used in a component before ESLint catches the error and stops the whole page from rendering on local dev? Anyhow, happy to chat more if it would help!

P.S. My apologies if I filed it in the wrong category. I didn't feel like this was a "bug" in the traditional sense, so I put it here to start.

[nimonian]

I noticed the same with eslint and used the same workaround just yesterday. It got me thinking that component registration feels maybe a little bit strange.

I wonder if it is better to register components to be used with <nuxt-content /> in the config somewhere rather than on the page where <nuxt-content /> is used. This means I can drop a component into my .md files without worrying "is this post going to be rendered on a page where this component is registered or not?" and, vice versa, I can import content onto a page without wondering "hmm... I wonder which components have been used in that content". The second issue could have me relying on error messages to see which components I need to register on the page. It seems decoupling content from pages and having content-scoped component registration could work. (I haven't thought about the overhead of this, though, which may be prohibitive?)

edit: just noticed in the docs that globally registered components work fine in content so that achieves pretty much the same end

[atinux]

Thank you for the report @bencodezen :)

We will plan to make it work with nuxt/components so it will automatically register the components used in Markdown without needing to import it and have the eslint error :)

[alvarosabu]

I was 1 second away to create a feature request to use @nuxt/components along with this module haha 😅😂 example here --> https://codesandbox.io/s/nuxtcontent-demo-wl5cx?file=/pages/_slug.vue, but it's great that you guys already have it planned.

Great job by the way guys. Looking forward.

[atinux]

Well, PR is more than welcome @alvarosaburido !

@nuxt/content needs to add a line with now the support of global option in @nuxt/components, see nuxt/components#43

I suggest that it adds:

components: [
  { path: '~/components/global', global: true' }
]

And recommend users to use components/global/ to add their global components that they use in the Markdown.

cc @pi0 on this, may find a nicer way.