Make quasar components compatible with volar

[soulsam480]

For anyone coming here to make quasar components compatible with volar paste this in component.d.ts

type OmitDefaults<T extends any> = Pick<T, Filter<keyof T, '$'>>;

/* eslint-disable @typescript-eslint/no-unused-vars */
type Filter<Set, Needle extends string> = Set extends `${Needle}${infer _X}` ? never : Set;

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    QAjaxBar: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QAjaxBar']>>>;

    QAvatar: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QAvatar']>>>;

    QBadge: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QBadge']>>>;

    QBanner: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QBanner']>>>;

    QBar: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QBar']>>>;

    QBreadcrumbs: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QBreadcrumbs']>>
    >;

    QBreadcrumbsEl: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QBreadcrumbsEl']>>
    >;

    QBtnDropdown: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QBtnDropdown']>>
    >;

    QBtnGroup: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QBtnGroup']>>>;

    QBtnToggle: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QBtnToggle']>>>;

    QBtn: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QBtn']>>>;

    QCard: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QCard']>>>;

    QCardActions: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QCardActions']>>
    >;

    QCardSection: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QCardSection']>>
    >;

    QCarousel: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QCarousel']>>>;

    QCarouselControl: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QCarouselControl']>>
    >;

    QCarouselSlide: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QCarouselSlide']>>
    >;

    QChatMessage: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QChatMessage']>>
    >;

    QCheckbox: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QCheckbox']>>>;

    QChip: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QChip']>>>;

    QCircularProgress: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QCircularProgress']>>
    >;

    QColor: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QColor']>>>;

    QDate: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QDate']>>>;

    QDialog: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QDialog']>>>;

    QDrawer: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QDrawer']>>>;

    QEditor: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QEditor']>>>;

    QExpansionItem: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QExpansionItem']>>
    >;

    QFab: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QFab']>>>;

    QFabAction: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QFabAction']>>>;

    QField: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QField']>>>;

    QFile: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QFile']>>>;

    QFooter: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QFooter']>>>;

    QForm: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QForm']>>>;

    QFormChildMixin: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QFormChildMixin']>>
    >;

    QHeader: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QHeader']>>>;

    QIcon: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QIcon']>>>;

    QImg: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QImg']>>>;

    QInfiniteScroll: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QInfiniteScroll']>>
    >;

    QInnerLoading: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QInnerLoading']>>
    >;

    QInput: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QInput']>>>;

    QIntersection: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QIntersection']>>
    >;

    QItem: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QItem']>>>;

    QItemLabel: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QItemLabel']>>>;

    QItemSection: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QItemSection']>>
    >;

    QList: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QList']>>>;

    QKnob: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QKnob']>>>;

    QLayout: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QLayout']>>>;

    QLinearProgress: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QLinearProgress']>>
    >;

    QMarkupTable: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QMarkupTable']>>
    >;

    QMenu: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QMenu']>>>;

    QNoSsr: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QNoSsr']>>>;

    QOptionGroup: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QOptionGroup']>>
    >;

    QPageScroller: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QPageScroller']>>
    >;

    QPageSticky: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QPageSticky']>>
    >;

    QPage: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QPage']>>>;

    QPageContainer: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QPageContainer']>>
    >;

    QPagination: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QPagination']>>
    >;

    QParallax: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QParallax']>>>;

    QPopupEdit: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QPopupEdit']>>>;

    QPopupProxy: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QPopupProxy']>>
    >;

    QPullToRefresh: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QPullToRefresh']>>
    >;

    QRadio: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QRadio']>>>;

    QRange: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QRange']>>>;

    QRating: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QRating']>>>;

    QResizeObserver: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QResizeObserver']>>
    >;

    QResponsive: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QResponsive']>>
    >;

    QScrollArea: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QScrollArea']>>
    >;

    QScrollObserver: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QScrollObserver']>>
    >;

    QSelect: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QSelect']>>>;

    QSeparator: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QSeparator']>>>;

    QSkeleton: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QSkeleton']>>>;

    QSlideItem: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QSlideItem']>>>;

    QSlideTransition: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSlideTransition']>>
    >;

    QSlider: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QSlider']>>>;

    QSpace: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QSpace']>>>;

    QSpinner: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QSpinner']>>>;

    QSpinnerAudio: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerAudio']>>
    >;

    QSpinnerBall: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerBall']>>
    >;

    QSpinnerBars: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerBars']>>
    >;

    QSpinnerBox: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerBox']>>
    >;

    QSpinnerClock: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerClock']>>
    >;

    QSpinnerComment: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerComment']>>
    >;

    QSpinnerCube: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerCube']>>
    >;

    QSpinnerDots: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerDots']>>
    >;

    QSpinnerFacebook: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerFacebook']>>
    >;

    QSpinnerGears: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerGears']>>
    >;

    QSpinnerGrid: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerGrid']>>
    >;

    QSpinnerHearts: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerHearts']>>
    >;

    QSpinnerHourglass: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerHourglass']>>
    >;

    QSpinnerInfinity: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerInfinity']>>
    >;

    QSpinnerIos: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerIos']>>
    >;

    QSpinnerOrbit: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerOrbit']>>
    >;

    QSpinnerOval: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerOval']>>
    >;

    QSpinnerPie: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerPie']>>
    >;

    QSpinnerPuff: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerPuff']>>
    >;

    QSpinnerRadio: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerRadio']>>
    >;

    QSpinnerRings: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerRings']>>
    >;

    QSpinnerTail: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerTail']>>
    >;

    QSplitter: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QSplitter']>>>;

    QStep: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QStep']>>>;

    QStepper: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QStepper']>>>;

    QStepperNavigation: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QStepperNavigation']>>
    >;

    QTabPanel: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTabPanel']>>>;

    QTabPanels: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTabPanels']>>>;

    QTable: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTable']>>>;

    QTd: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTd']>>>;

    QTh: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTh']>>>;

    QTr: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTr']>>>;

    QRouteTab: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QRouteTab']>>>;

    QTab: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTab']>>>;

    QTabs: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTabs']>>>;

    QTime: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTime']>>>;

    QTimeline: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTimeline']>>>;

    QTimelineEntry: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QTimelineEntry']>>
    >;

    QToggle: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QToggle']>>>;

    QToolbar: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QToolbar']>>>;

    QToolbarTitle: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QToolbarTitle']>>
    >;

    QTooltip: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTooltip']>>>;

    QTree: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTree']>>>;

    QUploader: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QUploader']>>>;

    QUploaderAddTrigger: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QUploaderAddTrigger']>>
    >;

    QVideo: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QVideo']>>>;

    QVirtualScroll: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QVirtualScroll']>>
    >;
  }
}

export {};

a small script for this is

try {
// s is a string of all quasar components separated by newline
  const components = s
    .split('\n')
    .reduce((arr, component) => {
      if (!component) return arr;
      console.log('extracting', component);

      arr.push(`
     ${component} : DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['${component}']>>>;
    `);
      return arr;
    }, [])
    .join('\n');

  const built = `

  type OmitDefaults<T extends any> = Pick<T, Filter<keyof T, '$'>>;

  type Filter<Set, Needle extends string> = Set extends \`$\{Needle\}\$\{infer _X\}\` ? never : Set;

  declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    ${components}
  }
}

export {};
`;

  writeFileSync('./src/components.d.ts', built);
} catch (error) {
  console.log(error);
}

[ontwikkelfabriek]

@soulsam480

This will help a lot of people.

Do you know why this is still necessary for Quasar components ? Is it because Quasar (v2) has not been rewritten in Typescript unlike Vue3 itself?

[soulsam480]

Reason is Volar doesn't support web types that vetur and quasar use for auto-completion. To get ts like auto-completion for global quasar components we need to do this. This is possible because the Quasar team provides ts definitions for props of all the components. see here for more info

[hawkeye64]

@IlCallo This looks useful

[IlCallo]

Yep, already in the works, thanks @soulsam480 for providing a workaround until we support it natively!

[yusufkandemir]

I was playing around with it earlier, and here is my solution:

import { DefineComponent, ComponentPublicInstance } from 'vue';
import { QBtn, /* ... */ } from 'quasar';

declare module 'vue' {
  export interface GlobalComponents {
    QBtn: DefineComponent<Omit<QBtn, keyof ComponentPublicInstance>>;
    // ...
  }
}

export {};

This solution is simpler and maybe even safer because there are also some properties/methods that are not prefixed with $ like emits, render, etc.
@soulsam480 thanks for the solution and please let me know what you think about this solution 👏

[soulsam480]

oh yes this looks cleaner, good

[johnsoncodehk]

Maybe some inspiration vuejs/language-tools#418 (comment)

[yusufkandemir]

#10839 is merged. The next release will provide Volar support out of the box, with a bonus: event auto-completion support 🚀

[soulsam480]

cool, this will be inside a patch or minor release ?

[hawkeye64]

patch

[soulsam480]

@yusufkandemir Upgraded to latest release, works great, Amazing work, thanks