vue-quasar-components

Lightweight Vue 3 plugin exposing two components (MyButton, MyCard) built with Vite and ready for Quasar-enabled Vue 3 apps.

Install

npm install vue-quasar-components quasar@^2.18.6 vue@^3.5.25

Import the bundled styles once (e.g., in main.ts):

import "vue-quasar-components/dist/vue-quasar-components.css";

Use

Global registration (plugin)

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import VueQuasarComponents from "vue-quasar-components";
import "vue-quasar-components/dist/vue-quasar-components.css";

createApp(App).use(VueQuasarComponents).mount("#app");

Usage in templates:

<template>
  <my-button @click="onClick">Click me</my-button>
  <my-card>
    <template #header>Card title</template>
    Card content here.
  </my-card>
</template>

Local registration (named imports)

<script setup lang="ts">
import { MyButton, MyCard } from "vue-quasar-components";
import "vue-quasar-components/dist/vue-quasar-components.css";

const onClick = () => alert("clicked");
</script>

<template>
  <MyButton type="submit" @click="onClick">Save</MyButton>
  <MyCard>
    <template #header>Summary</template>
    Body text
  </MyCard>
</template>

Components

• MyButton
  • Props: type?: 'button' | 'submit' | 'reset' (default: "button"), label?: string (default: ""; slot overrides).
  • Emits: click.
• MyCard
  • Slots: header, default slot for body content.

TypeScript setup (global component inference)

The package ships dist/index.d.ts for module types. For template inference of globally registered components, add a local declaration file and include it in tsconfig.json (e.g., "include": ["src/**/*.d.ts", ...]):

// src/types/vue-quasar-components.d.ts
import { App, Component } from "vue";

declare module "vue-quasar-components" {
  export const MyButton: Component;
  export const MyCard: Component;
  const plugin: { install(app: App): void };
  export default plugin;
}

declare module "@vue/runtime-core" {
  export interface GlobalComponents {
    MyButton: typeof import("vue-quasar-components")["MyButton"];
    MyCard: typeof import("vue-quasar-components")["MyCard"];
  }
}
export {};

Verify in a fresh project

npm create vite@latest my-app -- --template vue-ts
cd my-app
npm install
npm install vue-quasar-components quasar@^2.18.6
# add the plugin + CSS import as shown above
npm run dev

You should see a styled button and card; the button click should fire an alert.

Develop this package locally

npm install
npm run dev      # runs the demo at examples/demo
npm run build    # builds library + type declarations

Common issues

• Components render unstyled - ensure import 'vue-quasar-components/dist/vue-quasar-components.css' is in your entry file.
• TS error "Cannot find module 'vue-quasar-components'" - include the src/types/vue-quasar-components.d.ts file above and ensure dependencies are installed.
• Unknown elements (my-button/my-card) in templates - call app.use(VueQuasarComponents) or register via named imports.
• Peer dependency warnings - install compatible vue and quasar versions shown above.
• Click handler not firing - listen with @click on MyButton (it emits click).

Notes

• Bundles: ESM (dist/vue-quasar-components.es.js), CJS (dist/vue-quasar-components.cjs.js), UMD (dist/vue-quasar-components.umd.js), CSS (dist/vue-quasar-components.css), types (dist/index.d.ts).
• Works in ESM-first setups (Vite/webpack 5). CJS consumers should prefer ESM import syntax.
• Styles are scoped; override with normal CSS if desired.