How to import Quasar components to use Vue code completion in IntelliJ IDEA/Webstorm?



  • Hi all,

    I’m currently using JetBrains IntelliJ IDEA and WebStorm for Vue.js development.
    I’m wondering how to import single Quasar components so that I can use the Vue autocomplete features of the IDE (for example see the available props of a component).

    My best approach is shown in the following sceenshot (imports for QInput/QPage but still no code completion):
    0_1526936020967_quasar.JPG

    Does anyone knows how to do this properly?

    Thanks!



  • @mstill3r, this is because of IntelliJ Vuejs plugin requires component declaration with Vue.component(...), but quasar installs their plugins in some other way.

    I’ve found a little workaround to make autocompletion work. Just create some .js file in your project dir, for example - .qcomponents.js (filename doesn’t matter, you will not actually use it, it’s just for IntelliJ Vuejs plugin). Then add two lines for each quasar component, for example:

    import QBtn from 'quasar-framework/src/components/btn/QBtn'
    Vue.component(QBtn.name, QBtn)
    

    And there is my little ugly bash script to make it automatically (you need to run it only once with ">.qcomponents.js"):

    #!/bin/bash
    
    for file in `find node_modules/quasar-framework/src/components -name index.js`
    do
        dir="$(dirname $file)/"
        awk -v dir=${dir#node_modules/} '/^import Q/ {sub(/\.\//, dir); print; print "Vue.component(" $2 ".name, " $2 ")\n"}' $file
    done
    

    have a nice day )



  • Thank you hwb, that worked a treat and fixes a long standing annoyance for me!



  • @lesharris Would you mind sharing your .qcomponents.js file with the rest of us to save us having to list each component?

    Thanks in advance.



  • @niallobrien Nevermind, I got the bash script to run on Windows - thanks.