WebStorm warning: "Unknown html tag nuxt-content".

[mikeslattery]

It appears that Jetbrains IDEs cannot detect that nuxt-content is a registered component. No other component modules I use have this problem.

This problem is more serious than this. The component is registered as NuxtContent instead of the correct name of nuxt-content. This confuses the IDE, and may cause other issues with other tools and libraries.

On a side note, Jetbrains has a similar, but unrelated, issue with Nuxt project /components directory, which is solved by nuxt-storm.

See also fumeapp/nuxt-storm#7

Version

@nuxt/content: v1.14.0
nuxt: v2.15.8
nuxt-storm: 1.1.2
WebStorm: 2021.2

Reproduction Link

https://github.com/nuxtlabs/demo-blog-nuxt-content

Steps to reproduce

1. git clone https://github.com/nuxtlabs/demo-blog-nuxt-content
2. If not already, download and install WebStorm (PhpStorm and PyCharm should also work)
3. Ensure IDE has Vue.js plugin installed (should be already)
4. Create new project from existing demo-blog-nuxt-content directory from step 1
5. Run default inspection. Code (menu) -> Inspect Code -> (*) Whole Project -> OK
6. In "Problems" pane you should see an HTML warning for "Unknown html tag nuxt-content"

What is Expected?

No HTML warnings related to nuxt-conent

What is actually happening?

IDE "Problems" pane has HTML Warning : "Unknown html tag nuxt-content".

Workaround

In the root of the project create a file (I called it .components.js):

// Workaround to "Unknown html tag" Warnings
// See also nuxt-storm's .components.gen.js

import Vue from 'vue'

// This tag registers under the wrong name, NuxtContent
import NuxtContent from '@nuxt/content'
Vue.component('nuxt-content', NuxtContent)

Another workaround is to use <NuxtContent /> instead of <nuxt-content />.

[nozomuikuta]

@mikeslattery

Vue itself can resolves both kebab-case and PascalCase component names, regardless of how you register them (ref).

So, I guess this issue is not specific to Nuxt Content module that should be handled by the module.
Instead, it should be handle at WebStorm layer.

By the way, other than NuxtContent component, can WebStorm resolves your kebab-case-named components correctly, even if you register the components with PascalCase name?

[farnabaz]

This should be fixed in #1288