2

I want to generate static site with Astro generator (https://astro.build/) and I want to use Quasar UI components (https://quasar.dev/) on the site.

I found, I can set Vue app entry point in Astro config (astro.config.mjs):

import {defineConfig} from 'astro/config';
import vue from "@astrojs/vue";

// https://astro.build/config
export default defineConfig({
    integrations: [vue({appEntrypoint: '/src/pages/_app'})]
});

This is my ./src/pages/_app.mjs:

import {Quasar} from "quasar";
export default (app) => {
    app.use(Quasar, {config: {}});
}

I have an error on astro dev:

TypeError: Cannot convert undefined or null to object
    at Function.assign (<anonymous>)
    at installQuasar (/.../astro/node_modules/quasar/dist/quasar.cjs.prod.js:6:15454)
    at Object.install (/.../astro/node_modules/quasar/dist/quasar.cjs.prod.js:6:491344)
    at Object.use (/.../astro/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4377:28)
    at __vite_ssr_exports__.default (/src/pages/_app.mjs:6:9)
    at Object.renderToStaticMarkup (@astrojs/vue/server.js:22:30)
    at renderFrameworkComponent (/node_modules/astro/dist/runtime/server/render/component.js:178:66)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

How can I integrate Quasar UI into Astro SSG?

Alex Gusev
  • 1,526
  • 3
  • 16
  • 35

2 Answers2

1

Not a solution, but the answer to your question seems to be that Quasar UI cannot be currently integrated into any SSR or server-side rendering framework (including SSG or static site generation) except Quasar itself.

The only Quasar flavour that seems to be compatible with Astro's Vue.js integration docs seems to be the Vite plugin route, which as you mentioned, results in the TypeError: Cannot convert undefined or null to object error.

The incompatibility of Quasar's Vite plugin with SSR is mentioned explicitly in Quasar's docs:

Warning! Limitation ahead: SSR builds with our Vite plugin are not supported (only through our Quasar CLI with Vite).

In any case these are other things I tried, just in case someone finds it useful for further investigation:

astro.config.mjs:

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
import { Quasar } from 'quasar'; // Tried importing Quasar here as well

// https://astro.build/config
export default defineConfig({
    integrations: [vue({ jsx: true, appEntrypoint: '/src/pages/_app' })] // Added jsx: true
    vite: {
        plugins: [Quasar], // Plugins can be specified here as well
        ssr: {
            noExternal: ['quasar'] // Read bellow
        },
    },
});

The ssr: { noExternal: [] } usage idea was taken from here and makes the error change to ReferenceError: window is not defined at /node_modules/.pnpm/quasar@2.12.2/node_modules/quasar/dist/quasar.esm.prod.js:6:1453 which makes it more clear that the Vite Quasar plugin needs the windows object and thus can only work on the client.

/src/pages/_app.mjs:

import { Quasar } from 'quasar';
export default (app) => {
    app.use(Quasar, {config: {}});
}

Also, I found https://github.com/freddy38510/quasar-app-extension-ssg

cprcrack
  • 17,118
  • 7
  • 88
  • 91
0
import {Quasar} from "quasar";
export default (app) => {
    app.use(Quasar, {config: {}});
}

Problem with this code is that app.use require object with install as method, which Quasar object doesnt have, even if you manage to import object with install it will through out of module error.

Suggestion: Simply use UMD module provided by quasar.

Rashidtvmr
  • 108
  • 8