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.



  • @niallobrien Would you mind if I request You to sharing the windows bash script?



  • @niallobrien Nevermind.

    Here’s .qcomponents.js with version 0.17.20

    import QActionSheet from 'quasar-framework/src/components/action-sheet/QActionSheet.js'
    Vue.component(QActionSheet.name, QActionSheet)
    
    import QAjaxBar from 'quasar-framework/src/components/ajax-bar/QAjaxBar.js'
    Vue.component(QAjaxBar.name, QAjaxBar)
    
    import QAlert from 'quasar-framework/src/components/alert/QAlert.js'
    Vue.component(QAlert.name, QAlert)
    
    import QAutocomplete from 'quasar-framework/src/components/autocomplete/QAutocomplete.js'
    Vue.component(QAutocomplete.name, QAutocomplete)
    
    import QBreadcrumbs from 'quasar-framework/src/components/breadcrumbs/QBreadcrumbs.js'
    Vue.component(QBreadcrumbs.name, QBreadcrumbs)
    
    import QBreadcrumbsEl from 'quasar-framework/src/components/breadcrumbs/QBreadcrumbsEl.js'
    Vue.component(QBreadcrumbsEl.name, QBreadcrumbsEl)
    
    import QBtn from 'quasar-framework/src/components/btn/QBtn.js'
    Vue.component(QBtn.name, QBtn)
    
    import QBtnGroup from 'quasar-framework/src/components/btn/QBtnGroup.js'
    Vue.component(QBtnGroup.name, QBtnGroup)
    
    import QBtnDropdown from 'quasar-framework/src/components/btn/QBtnDropdown.js'
    Vue.component(QBtnDropdown.name, QBtnDropdown)
    
    import QBtnToggle from 'quasar-framework/src/components/btn/QBtnToggle.js'
    Vue.component(QBtnToggle.name, QBtnToggle)
    
    import QCard from 'quasar-framework/src/components/card/QCard.js'
    Vue.component(QCard.name, QCard)
    
    import QCardTitle from 'quasar-framework/src/components/card/QCardTitle.js'
    Vue.component(QCardTitle.name, QCardTitle)
    
    import QCardMain from 'quasar-framework/src/components/card/QCardMain.js'
    Vue.component(QCardMain.name, QCardMain)
    
    import QCardActions from 'quasar-framework/src/components/card/QCardActions.js'
    Vue.component(QCardActions.name, QCardActions)
    
    import QCardMedia from 'quasar-framework/src/components/card/QCardMedia.js'
    Vue.component(QCardMedia.name, QCardMedia)
    
    import QCardSeparator from 'quasar-framework/src/components/card/QCardSeparator.js'
    Vue.component(QCardSeparator.name, QCardSeparator)
    
    import QCarousel from 'quasar-framework/src/components/carousel/QCarousel.js'
    Vue.component(QCarousel.name, QCarousel)
    
    import QCarouselSlide from 'quasar-framework/src/components/carousel/QCarouselSlide.js'
    Vue.component(QCarouselSlide.name, QCarouselSlide)
    
    import QCarouselControl from 'quasar-framework/src/components/carousel/QCarouselControl.js'
    Vue.component(QCarouselControl.name, QCarouselControl)
    
    import QChatMessage from 'quasar-framework/src/components/chat/QChatMessage.js'
    Vue.component(QChatMessage.name, QChatMessage)
    
    import QCheckbox from 'quasar-framework/src/components/checkbox/QCheckbox.js'
    Vue.component(QCheckbox.name, QCheckbox)
    
    import QChip from 'quasar-framework/src/components/chip/QChip.js'
    Vue.component(QChip.name, QChip)
    
    import QChipsInput from 'quasar-framework/src/components/chips-input/QChipsInput.js'
    Vue.component(QChipsInput.name, QChipsInput)
    
    import QCollapsible from 'quasar-framework/src/components/collapsible/QCollapsible.js'
    Vue.component(QCollapsible.name, QCollapsible)
    
    import QColor from 'quasar-framework/src/components/color/QColor.js'
    Vue.component(QColor.name, QColor)
    
    import QColorPicker from 'quasar-framework/src/components/color/QColorPicker.js'
    Vue.component(QColorPicker.name, QColorPicker)
    
    import QContextMenu from 'quasar-framework/src/components/context-menu/QContextMenu.js'
    Vue.component(QContextMenu.name, QContextMenu)
    
    import QDatetime from 'quasar-framework/src/components/datetime/QDatetime.js'
    Vue.component(QDatetime.name, QDatetime)
    
    import QDatetimePicker from 'quasar-framework/src/components/datetime/QDatetimePicker'
    Vue.component(QDatetimePicker.name, QDatetimePicker)
    
    import QDialog from 'quasar-framework/src/components/dialog/QDialog.js'
    Vue.component(QDialog.name, QDialog)
    
    import QEditor from 'quasar-framework/src/components/editor/QEditor.js'
    Vue.component(QEditor.name, QEditor)
    
    import QFab from 'quasar-framework/src/components/fab/QFab.js'
    Vue.component(QFab.name, QFab)
    
    import QFabAction from 'quasar-framework/src/components/fab/QFabAction.js'
    Vue.component(QFabAction.name, QFabAction)
    
    import QField from 'quasar-framework/src/components/field/QField.js'
    Vue.component(QField.name, QField)
    
    import QIcon from 'quasar-framework/src/components/icon/QIcon.js'
    Vue.component(QIcon.name, QIcon)
    
    import QInfiniteScroll from 'quasar-framework/src/components/infinite-scroll/QInfiniteScroll.js'
    Vue.component(QInfiniteScroll.name, QInfiniteScroll)
    
    import QInnerLoading from 'quasar-framework/src/components/inner-loading/QInnerLoading.js'
    Vue.component(QInnerLoading.name, QInnerLoading)
    
    import QInput from 'quasar-framework/src/components/input/QInput.js'
    Vue.component(QInput.name, QInput)
    
    import QInputFrame from 'quasar-framework/src/components/input-frame/QInputFrame.js'
    Vue.component(QInputFrame.name, QInputFrame)
    
    import QJumbotron from 'quasar-framework/src/components/jumbotron/QJumbotron.js'
    Vue.component(QJumbotron.name, QJumbotron)
    
    import QKnob from 'quasar-framework/src/components/knob/QKnob.js'
    Vue.component(QKnob.name, QKnob)
    
    import QLayout from 'quasar-framework/src/components/layout/QLayout.js'
    Vue.component(QLayout.name, QLayout)
    
    import QLayoutDrawer from 'quasar-framework/src/components/layout/QLayoutDrawer.js'
    Vue.component(QLayoutDrawer.name, QLayoutDrawer)
    
    import QLayoutFooter from 'quasar-framework/src/components/layout/QLayoutFooter.js'
    Vue.component(QLayoutFooter.name, QLayoutFooter)
    
    import QLayoutHeader from 'quasar-framework/src/components/layout/QLayoutHeader.js'
    Vue.component(QLayoutHeader.name, QLayoutHeader)
    
    import QPage from 'quasar-framework/src/components/layout/QPage.js'
    Vue.component(QPage.name, QPage)
    
    import QPageContainer from 'quasar-framework/src/components/layout/QPageContainer.js'
    Vue.component(QPageContainer.name, QPageContainer)
    
    import QPageSticky from 'quasar-framework/src/components/layout/QPageSticky.js'
    Vue.component(QPageSticky.name, QPageSticky)
    
    import QItem from 'quasar-framework/src/components/list/QItem.js'
    Vue.component(QItem.name, QItem)
    
    import QItemSeparator from 'quasar-framework/src/components/list/QItemSeparator.js'
    Vue.component(QItemSeparator.name, QItemSeparator)
    
    import QItemMain from 'quasar-framework/src/components/list/QItemMain.js'
    Vue.component(QItemMain.name, QItemMain)
    
    import QItemSide from 'quasar-framework/src/components/list/QItemSide.js'
    Vue.component(QItemSide.name, QItemSide)
    
    import QItemTile from 'quasar-framework/src/components/list/QItemTile.js'
    Vue.component(QItemTile.name, QItemTile)
    
    import QItemWrapper from 'quasar-framework/src/components/list/QItemWrapper.js'
    Vue.component(QItemWrapper.name, QItemWrapper)
    
    import QList from 'quasar-framework/src/components/list/QList.js'
    Vue.component(QList.name, QList)
    
    import QListHeader from 'quasar-framework/src/components/list/QListHeader.js'
    Vue.component(QListHeader.name, QListHeader)
    
    import QModal from 'quasar-framework/src/components/modal/QModal.js'
    Vue.component(QModal.name, QModal)
    
    import QModalLayout from 'quasar-framework/src/components/modal/QModalLayout.js'
    Vue.component(QModalLayout.name, QModalLayout)
    
    import QNoSsr from 'quasar-framework/src/components/no-ssr/QNoSsr.js'
    Vue.component(QNoSsr.name, QNoSsr)
    
    import QResizeObservable from 'quasar-framework/src/components/observables/QResizeObservable.js'
    Vue.component(QResizeObservable.name, QResizeObservable)
    
    import QScrollObservable from 'quasar-framework/src/components/observables/QScrollObservable.js'
    Vue.component(QScrollObservable.name, QScrollObservable)
    
    import QWindowResizeObservable from 'quasar-framework/src/components/observables/QWindowResizeObservable.js'
    Vue.component(QWindowResizeObservable.name, QWindowResizeObservable)
    
    import QOptionGroup from 'quasar-framework/src/components/option-group/QOptionGroup.js'
    Vue.component(QOptionGroup.name, QOptionGroup)
    
    import QPagination from 'quasar-framework/src/components/pagination/QPagination.js'
    Vue.component(QPagination.name, QPagination)
    
    import QParallax from 'quasar-framework/src/components/parallax/QParallax.js'
    Vue.component(QParallax.name, QParallax)
    
    import QPopover from 'quasar-framework/src/components/popover/QPopover.js'
    Vue.component(QPopover.name, QPopover)
    
    import QPopupEdit from 'quasar-framework/src/components/popup-edit/QPopupEdit.js'
    Vue.component(QPopupEdit.name, QPopupEdit)
    
    import QProgress from 'quasar-framework/src/components/progress/QProgress.js'
    Vue.component(QProgress.name, QProgress)
    
    import QPullToRefresh from 'quasar-framework/src/components/pull-to-refresh/QPullToRefresh.js'
    Vue.component(QPullToRefresh.name, QPullToRefresh)
    
    import QRadio from 'quasar-framework/src/components/radio/QRadio.js'
    Vue.component(QRadio.name, QRadio)
    
    import QRange from 'quasar-framework/src/components/range/QRange.js'
    Vue.component(QRange.name, QRange)
    
    import QRating from 'quasar-framework/src/components/rating/QRating.js'
    Vue.component(QRating.name, QRating)
    
    import QScrollArea from 'quasar-framework/src/components/scroll-area/QScrollArea.js'
    Vue.component(QScrollArea.name, QScrollArea)
    
    import QSearch from 'quasar-framework/src/components/search/QSearch.js'
    Vue.component(QSearch.name, QSearch)
    
    import QSelect from 'quasar-framework/src/components/select/QSelect.js'
    Vue.component(QSelect.name, QSelect)
    
    import QSlideTransition from 'quasar-framework/src/components/slide-transition/QSlideTransition.js'
    Vue.component(QSlideTransition.name, QSlideTransition)
    
    import QSlider from 'quasar-framework/src/components/slider/QSlider.js'
    Vue.component(QSlider.name, QSlider)
    
    import QSpinner from 'quasar-framework/src/components/spinner/QSpinner.js'
    Vue.component(QSpinner.name, QSpinner)
    
    import QSpinnerAudio from 'quasar-framework/src/components/spinner/QSpinnerAudio.js'
    Vue.component(QSpinnerAudio.name, QSpinnerAudio)
    
    import QSpinnerBall from 'quasar-framework/src/components/spinner/QSpinnerBall.js'
    Vue.component(QSpinnerBall.name, QSpinnerBall)
    
    import QSpinnerBars from 'quasar-framework/src/components/spinner/QSpinnerBars.js'
    Vue.component(QSpinnerBars.name, QSpinnerBars)
    
    import QSpinnerCircles from 'quasar-framework/src/components/spinner/QSpinnerCircles.js'
    Vue.component(QSpinnerCircles.name, QSpinnerCircles)
    
    import QSpinnerComment from 'quasar-framework/src/components/spinner/QSpinnerComment.js'
    Vue.component(QSpinnerComment.name, QSpinnerComment)
    
    import QSpinnerCube from 'quasar-framework/src/components/spinner/QSpinnerCube.js'
    Vue.component(QSpinnerCube.name, QSpinnerCube)
    
    import QSpinnerDots from 'quasar-framework/src/components/spinner/QSpinnerDots.js'
    Vue.component(QSpinnerDots.name, QSpinnerDots)
    
    import QSpinnerFacebook from 'quasar-framework/src/components/spinner/QSpinnerFacebook.js'
    Vue.component(QSpinnerFacebook.name, QSpinnerFacebook)
    
    import QSpinnerGears from 'quasar-framework/src/components/spinner/QSpinnerGears.js'
    Vue.component(QSpinnerGears.name, QSpinnerGears)
    
    import QSpinnerGrid from 'quasar-framework/src/components/spinner/QSpinnerGrid.js'
    Vue.component(QSpinnerGrid.name, QSpinnerGrid)
    
    import QSpinnerHearts from 'quasar-framework/src/components/spinner/QSpinnerHearts.js'
    Vue.component(QSpinnerHearts.name, QSpinnerHearts)
    
    import QSpinnerHourglass from 'quasar-framework/src/components/spinner/QSpinnerHourglass.js'
    Vue.component(QSpinnerHourglass.name, QSpinnerHourglass)
    
    import QSpinnerInfinity from 'quasar-framework/src/components/spinner/QSpinnerInfinity.js'
    Vue.component(QSpinnerInfinity.name, QSpinnerInfinity)
    
    import QSpinnerIos from 'quasar-framework/src/components/spinner/QSpinner.ios.js'
    Vue.component(QSpinnerIos.name, QSpinnerIos)
    
    import QSpinnerMat from 'quasar-framework/src/components/spinner/QSpinner.mat.js'
    Vue.component(QSpinnerMat.name, QSpinnerMat)
    
    import QSpinnerOval from 'quasar-framework/src/components/spinner/QSpinnerOval.js'
    Vue.component(QSpinnerOval.name, QSpinnerOval)
    
    import QSpinnerPie from 'quasar-framework/src/components/spinner/QSpinnerPie.js'
    Vue.component(QSpinnerPie.name, QSpinnerPie)
    
    import QSpinnerPuff from 'quasar-framework/src/components/spinner/QSpinnerPuff.js'
    Vue.component(QSpinnerPuff.name, QSpinnerPuff)
    
    import QSpinnerRadio from 'quasar-framework/src/components/spinner/QSpinnerRadio.js'
    Vue.component(QSpinnerRadio.name, QSpinnerRadio)
    
    import QSpinnerRings from 'quasar-framework/src/components/spinner/QSpinnerRings.js'
    Vue.component(QSpinnerRings.name, QSpinnerRings)
    
    import QSpinnerTail from 'quasar-framework/src/components/spinner/QSpinnerTail.js'
    Vue.component(QSpinnerTail.name, QSpinnerTail)
    
    import QStep from 'quasar-framework/src/components/stepper/QStep.js'
    Vue.component(QStep.name, QStep)
    
    import QStepper from 'quasar-framework/src/components/stepper/QStepper.js'
    Vue.component(QStepper.name, QStepper)
    
    import QStepperNavigation from 'quasar-framework/src/components/stepper/QStepperNavigation.js'
    Vue.component(QStepperNavigation.name, QStepperNavigation)
    
    import QRouteTab from 'quasar-framework/src/components/tab/QRouteTab.js'
    Vue.component(QRouteTab.name, QRouteTab)
    
    import QTab from 'quasar-framework/src/components/tab/QTab.js'
    Vue.component(QTab.name, QTab)
    
    import QTabPane from 'quasar-framework/src/components/tab/QTabPane.js'
    Vue.component(QTabPane.name, QTabPane)
    
    import QTabs from 'quasar-framework/src/components/tab/QTabs.js'
    Vue.component(QTabs.name, QTabs)
    
    import QTable from 'quasar-framework/src/components/table/QTable.js'
    Vue.component(QTable.name, QTable)
    
    import QTh from 'quasar-framework/src/components/table/QTh.js'
    Vue.component(QTh.name, QTh)
    
    import QTr from 'quasar-framework/src/components/table/QTr.js'
    Vue.component(QTr.name, QTr)
    
    import QTd from 'quasar-framework/src/components/table/QTd.js'
    Vue.component(QTd.name, QTd)
    
    import QTableColumns from 'quasar-framework/src/components/table/QTableColumns.js'
    Vue.component(QTableColumns.name, QTableColumns)
    
    import QTimeline from 'quasar-framework/src/components/timeline/QTimeline.js'
    Vue.component(QTimeline.name, QTimeline)
    
    import QTimelineEntry from 'quasar-framework/src/components/timeline/QTimelineEntry.js'
    Vue.component(QTimelineEntry.name, QTimelineEntry)
    
    import QToggle from 'quasar-framework/src/components/toggle/QToggle.js'
    Vue.component(QToggle.name, QToggle)
    
    import QToolbar from 'quasar-framework/src/components/toolbar/QToolbar.js'
    Vue.component(QToolbar.name, QToolbar)
    
    import QToolbarTitle from 'quasar-framework/src/components/toolbar/QToolbarTitle.js'
    Vue.component(QToolbarTitle.name, QToolbarTitle)
    
    import QTooltip from 'quasar-framework/src/components/tooltip/QTooltip.js'
    Vue.component(QTooltip.name, QTooltip)
    
    import QTree from 'quasar-framework/src/components/tree/QTree.js'
    Vue.component(QTree.name, QTree)
    
    import QUploader from 'quasar-framework/src/components/uploader/QUploader.js'
    Vue.component(QUploader.name, QUploader)
    
    import QVideo from 'quasar-framework/src/components/video/QVideo.js'
    Vue.component(QVideo.name, QVideo)