Quasar Component Library

[RizaHKhan]

Hello,

We're building a couple of apps that require pretty much the same theme colors and components. We decided to try and build a library with Quasar and so far so good... we pushed to NPM and are able to import the components where we need.

The only hiccup is how the CSS gets exported. It doesn't seem to work... in the sense that the receiving repository, I need to explicitly re-add the quasar-variables.scss file. Which somewhat defeats the purpose of creating a library.

My vite-config.js:

import { resolve } from 'path';
import { defineConfig } from 'vite';
import { quasar, transformAssetUrls } from '@quasar/vite-plugin';
import eslintPlugin from 'vite-plugin-eslint';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
    build: {
        lib: {
            entry: resolve(__dirname, 'src/index.js'),
            name: 'AvvinueClowder',
            fileName: (format) => `avvinue-clowder.${format}.js`,
        },
        rollupOptions: {
            external: ['vue'],
            output: {
                globals: {
                    vue: 'Vue',
                },
            },
        },
    },
    plugins: [
        vue({
            template: { transformAssetUrls },
        }),
        eslintPlugin(),
        quasar({
            sassVariables: 'src/style/_quasar-variables.sass',
        }),
    ],
    resolve: {
        alias: {
            '@': resolve(__dirname, './src'),
        },
    },
});

and the index.js file referenced in the above config is just a export of all of the components:

// Atoms
export { default as AVButton } from '@/atoms/AVButton.vue';
export { default as AVCheckbox } from '@/atoms/AVCheckbox.vue';
export { default as AVDate } from '@/atoms/AVDate.vue';
export { default as AVIcon } from '@/atoms/AVIcon.vue';
export { default as AVInput } from '@/atoms/AVInput.vue';
export { default as AVRichText } from '@/atoms/AVRichText.vue';
export { default as AVRow } from '@/atoms/AVRow.vue';
export { default as AVSelect } from '@/atoms/AVSelect.vue';
export { default as AVTable } from '@/atoms/AVTable.vue';
export { default as AVToggle } from '@/atoms/AVToggle.vue';
export { default as AVWrapper } from '@/atoms/AVWrapper.vue';

// Molecules
export { default as AVColorPicker } from '@/molecules/AVColorPicker.vue';
export { default as AVDatePicker } from '@/molecules/AVDatePicker.vue';
export { default as AVFooter } from '@/molecules/AVFooter.vue';
export { default as AVLogo } from '@/molecules/AVLogo.vue';
export { default as AVModal } from '@/molecules/AVModal.vue';

// Organisms

// Composables
export { default as useResponsiveness } from '@/composables/useResponsiveness.js';

// Styles
export { default as style } from '@/style/index.sass';

How can I export this so that the CSS I specify in this library carries over to where I export it (FYI, I will always export it to another Quasar app).

[fjolla-d]

Hi, I'm having the same issue. Did you manage to find a solution?

[dscottbot]

Hey I am also curious where this ended up?

[stefanvanherwijnen]

I use a subpath export for just the CSS which I import in App.vue:
https://github.com/simsustech/quasar-components/blob/e31cc51c05754600eb6d2603b56703bf362ad146/packages/components/package.json#L35

If what you mean is creating Quasar based components without using Quasar Framework in the receiving project, that is not possible (for multiple reasons).