camelCase auto-complete for custom Vue components in HTML template

Let's say I've imported a custom component pFancyButton from a component library:



import { pFancyButton } from '@coolLib/components'

export default Vue.extends({

    components: { pFancyButton },




Now when I go and type 'p' in the template, autocomplete shows up 'p-fancy-button' instead of 'pFancyButton'. I know both work, but having different casing for custom components can help distinguish them from the default ones as officially advised here. Is there any setting I can look into to change this behavior?

Comment actions Permalink

The IDE suggests both CamelCase and camel-case if completion in case-insensitive.

For case-sensitive completion (Match case enabled in Settings | Editor | General | Code Completion), the suggested variant depends on the case of a character you have entered. Note that pFancyButton is still a bad style according to style guides, the component name should start with upper case

Comment actions Permalink

Thanks for the reply!

Unfortunately, the lowercase-starting naming convention for component tags is an in-house styling rule that I have no control over. Is there any way I can configure so WebStorm would suggest autocomplete as-is based on what I define in the components under Vue options? If not, is it possible with a plugin that can be made within reasonable effort?

Comment actions Permalink

The answer is 'no' to both questions, sorry. Note that Vue plugin is open source, the sources are available at, but I doubt that extending it with a custom plugin is a reasonable effort unless you have experience with developing plugins for JetBrains IDEs


Please sign in to leave a comment.