Vuejs template in a php file, javascript code in another file. How to bind them?



I'm using PhpStorm 2018.2, and I'm working in a legacy project where I'm dropping into some vue.js. The thing is that I have my template inside my php code, so phpstorm does not recognize it as a vue template. So my first question is, how do I annotate the parts of HTML code that are supposed to be a vuejs template?



My other question is, I have my actual vuejs javascript code in a normal .js file where my vue component. How can i tell phpstorm to look for that file when I'm writing something in my template?


Thank you very much for your time!

Vladimir Luchansky


You can set Vue or VueJS as a template language for selected files or paths at Settings/Preferences | Languages & Frameworks | Template Data Languages.

> How can i tell phpstorm to look for that file when I'm writing something in my template?

Could you provide more details on this, please? What exactly you'd like to achieve?


I don't completely get it.

My folder is full of php files (my view folder). If I map that folder to VueJS:

I start getting unresolved variable types and things related to vue:

It is not possible to just annotate a part of a php view as a vue template?


On the other hand, sorry I didn't explain myself. Let's say I have my vue template in: protected/views/clients.php. In that file I have my html code, and part of that html code will be a vue template. Then, I have public/js/clients.js where I have my vue code. ¿How can I set up php storm so when I'm editing clients.php I got vue autocompletition, if my code is on another file?


Vue.js plugin only supports single-file components with a .vue extension ( Components in .html/.php files are not supported, sorry... Neither we support defining components code in external javascript file. If you miss this feature, please follow and for updates.

To be frank, we don’t have any immediate plans to implement it. To provide a good development experience for these components, we need to invest significant resources and right now we want to keep our focus on improving for support for the more commonly used single-file components, there’re still a lot of things we need to do in this area.


Ok, the single file components is the way to go.



Please sign in to leave a comment.