How to search for vue components with vim's gf?

Question

I want to go to a vue component file.

Vue component filenames are written in PascalCase: ExampleComponent.vue

In html (or in my case blade.php) the ExampleComponent.vue is instantiated by <example-component> (kebab-case). When my cursor is over <example-component> I get E447: Can't find file "container-gallery" in path

In the docs is written:

If the file can't be found, 'includeexpr' is used to
modify the name and another attempt is done.

So my Question is how do I use includeexpr in order to change from

example-component

to

resources/js/components/ExampleComponent.vue

Further research pointed me to the substitute function: :set includeexpr=substitute(v:fname, ..... )

but then I would need to preprocess the v:fname variable. A hint how to tackle that problem would be highly appreciated.

Answer 1

I wrapped the substitute function in a own function:

function! B(name)
   return substitute(a:name,'\(\w\+\)\(\-\)\(\w\+\)','\u\1\u\3','')
endfunction`

~~/.vim/bundle/vim-blade/ftplugin/blade.vim --->this plugin overwrites my setlocal path so for a quick fix I added my changes to that plugin:

11 setlocal suffixesadd=.blade.php,.php,.vue
12 " setlocal includeexpr=substitute(v:fname,'\\.','/','g')
13 setlocal includeexpr=B(v:fname)
14 setlocal path+=resources/views;
15 setlocal path+=resources/js/components/;
16 setlocal path+=resources/js/components/gallery;

Instead of calling directly the substitution function I call my function B. I have no idea why I had to wrap substition in a custom function. It's not perfect, but now it changes from kebab-case to PascalCase and finds my vue-files. Suggestions for improvements are welcome.