Quasar Component Library

Reusable Vue 3 + Quasar UI components.

1. Create Project Folder mkdir quasar-components-lib cd quasar-components-lib npm init -y

2. Install Required Dependencies npm install vue quasar npm install -D vite @vitejs/plugin-vue

3. Create Project Structure mkdir src touch src/MyButton.vue index.js vite.config.js README.md .npmignore

4. index.js import MyButton from './src/MyButton.vue';

export { MyButton };

export default { install(app) { app.component('MyButton', MyButton); } };

5. vite.config.js import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue';

export default defineConfig({ plugins: [vue()], build: { lib: { entry: 'index.js', name: 'QuasarComponents', fileName: (format) => quasar-components.${format}.js, }, rollupOptions: { external: ['vue', 'quasar'], output: { globals: { vue: 'Vue', quasar: 'Quasar' } } } } });

6. .npmignore src/ node_modules/ *.log

7. Update package.json Modify it like this: { "name": "@your-scope/quasar-components", "version": "1.0.0", "main": "dist/quasar-components.umd.js", "module": "dist/quasar-components.es.js", "scripts": { "build": "vite build" }, "peerDependencies": { "vue": "^3.0.0", "quasar": "^2.0.0" }, "devDependencies": { "vite": "^5.0.0", "@vitejs/plugin-vue": "^5.0.0", "vue": "^3.3.0", "quasar": "^2.14.0" } }

8. npm publish --access public