No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    9
    11
    5806
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ?
      A Former User last edited by A Former User

      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!

      H 1 Reply Last reply Reply Quote 1
      • H
        hwb @Guest last edited by

        @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 )

        1 Reply Last reply Reply Quote 3
        • L
          lesharris last edited by

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

          N 1 Reply Last reply Reply Quote 0
          • N
            niallobrien @lesharris last edited by

            @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.

            N 1 Reply Last reply Reply Quote 0
            • N
              niallobrien @niallobrien last edited by

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

              J 2 Replies Last reply Reply Quote 0
              • J
                Jihoon @niallobrien last edited by

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

                1 Reply Last reply Reply Quote 0
                • J
                  Jihoon @niallobrien last edited by

                  @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)
                  S 1 Reply Last reply Reply Quote 1
                  • S
                    SharpBCD @Jihoon last edited by

                    @jihoon Brilliant! Thank you.
                    In case there are new ways, let me know. Until then this worked just fine.

                    1 Reply Last reply Reply Quote 0
                    • N
                      nachodd last edited by nachodd

                      For newer versions of quasar, the quasar folder in node_modules is just ‘quasar/’

                      #!/bin/bash

for file in `find node_modules/quasar/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'
                      1 Reply Last reply Reply Quote 1
                      • bestog
                        bestog last edited by

                        Use for >= 1.0
                        https://github.com/panstromek/quasar-ide-helper

                        1 Reply Last reply Reply Quote 3
                        • nothingismagick
                          nothingismagick last edited by

                          @bestog is right, this is the best way to do this.

                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post