Quasar + Nuxt3 + SSR

Is your feature request related to a problem? Please describe. I would really like to integrate Quasar into Nuxt 3 with SSR mode enabled. I have a working prototype (yarn dev) that uses the Quasar Vite Plugin + Nuxt3.

The repo is here: https://github.com/piscis/nuxt-quasar-boilerplate/tree/example/quasar-vite-nuxt3-working

How every as soon as I enable SSR in nuxt.config.ts and restart vite I get the following error when my components render on the server:

window is not defined
  at $id_91abbf3f (file://./.nuxt/dist/server/server.mjs:3359:1154)  
  at async __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:3812:3)

Looking at the server.mjs bundle I noticed helper referencing “window” for example:

const hasTouch="ontouchstart"in window||window.navigator.maxTouchPoints>0;

Describe the solution you’d like I would like to enable Nuxt3 SSR mode and use Quasar Components and beeing able to render Quasar Components on the server side.

Describe alternatives you’ve considered

• Using Quasar SSR Mode, but it laks the massive plugin ecosystem nuxt has like: nuxt-image, nuxt-head, nuxt-recatpcha aso. Also all of the new features like deployment to Cloudflare worker aso. Are missing with quasar SSR.
• Keep SSR disabled not really an alternative, but more of a workaround.
• I also tried to set:

__QUASAR_SSR__: true,
__QUASAR_SSR_SERVER__: true

But that didn’t help.

Additional context I think supporting Nuxt 3 instead of shipping a custom build SSR integration could expose Quasar Framework even more in the VUE/Nuxt ecosystem. Probably the new Nuxt CLI nuxi could help to build a wrapper around nuxt so quasar cli could provide similar support like it does today with capacitor / cap cli.

please note yarn build fails at the moment due to: nuxt/bridge#27

[piscis]

For anyone who is interested.

~~https://github.com/piscis/nuxt-quasar-boilerplate/tree/example/quasar-vite-nuxt3-working ~~

This branch contains a Nuxt3 + Quasar setup that produces a production build.

~~

Spoiler:

~~

There are still some limitations:

1. No real SSR support due a problem with the ssr flag set to false in nuxt-config, in order to get it to work I wrapped the root element with <client-only /> and build it with SSR enabled. 2. There is a problem mit vue vite plugin + Nuxt and the new quasar transformAssetUrls helper from quasar. I think at the moment it’s not possible to use multiple vue vite plugins in nuxt and therefore using transformAssetUrls helper will break the Nuxt vite config.

But in theory its possible to get quasar working with nuxt via vite and build it.

Update: please see my comment here: https://github.com/quasarframework/quasar/issues/11165#issuecomment-1312528612

[angelhdzmultimedia]

I managed to get it working like this:

1. In root folder (or if you are using srcDir in Nuxt’s config it would be the src folder), create a plugins folder.
2. Inside plugins folder, create a quasar.client.ts file.
3. Inside quasar.client.ts, add the following code:

import { NuxtApp } from 'nuxt/dist/app/nuxt';
import {Quasar} from 'quasar';
import '@quasar/extras/roboto-font/roboto-font.css'
import '@quasar/extras/material-icons/material-icons.css'
import '@quasar/extras/fontawesome-v6/fontawesome-v6.css'

// Import Quasar css
import 'quasar/dist/quasar.css'

export default defineNuxtPlugin((nuxtApp: NuxtApp): unknown => {
  nuxtApp.vueApp.use(Quasar, {})
  return {
    
  }
})

(remember to run npm install quasar @quasar/extras)

1. Everything will render, but a [Vue Warn] warnings come up about adding some Vue Compiler options to specify Quasar’s components as custom components, so I finally solved this by setting ssr: false in Nuxt’s config.

Even though I’m glad I finally can render Quasar in Nuxt 3, some questions came up: Why can’t Quasar work SSR? Why can’t Quasar be smoothly installed as a Quasar Vite Plugin if Nuxt supports Vite now?