Quasar + Nuxt3 + SSR #11165

piscis · 2021-10-30T16:20:36Z

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

The text was updated successfully, but these errors were encountered:

JeRabix · 2021-10-30T17:36:56Z

@piscis
link "The repo is here: https://github.com/piscis/nuxt-quasar-boilerplate/tree/example/quasar-vite-nuxt3-working"
not work :(

piscis · 2021-10-30T19:13:45Z

@JeRabix sorry have forgotten to make it public it should work now

webfansplz · 2021-11-08T08:18:50Z

@rstoenescu Same issue, do we have any plans to support Nuxt3 ? thanks

webfansplz · 2021-11-08T08:59:25Z

Looks like a limit. Is there a support plan ?

piscis · 2021-11-08T09:35:33Z

Looking at the type-definitions of the vite plugin I could find that a ssr-server and ssr-client mode could be available at some point:

Source:

quasar/vite-plugin/index.d.ts

Lines 24 to 31 in 3311a20

    
             /** 
        
              * How will Quasar be used? In a: 
        
              *    "web-client" (default) 
        
              *    "ssr-server" (NOT YET AVAILABLE) SSR on server-side 
        
              *    "ssr-client" (NOT YET AVAILABLE) SSR on client-side 
        
              */ 
        
             // runMode?: "web-client" | "ssr-client" | "ssr-server"; 
        
           }

But I'm confused if that means that Quasar + Vite + SSR could eventually work with SSR / SSG frameworks like nuxt?

hawkeye64 · 2021-11-08T13:51:37Z

#11231

stefanvanherwijnen · 2021-11-15T20:00:19Z

I am having the same issue with quasar-app-vite and it is caused by defining quasar in noExternal, which bundles quasar.esm.prod.js which in turn is a browser build.

piscis · 2021-12-06T16:07:17Z

~~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: #11165 (comment)

angelhdzdev · 2022-08-03T00:06:51Z

I managed to get it working like this:

In root folder (or if you are using srcDir in Nuxt's config it would be the src folder), create a plugins folder.
Inside plugins folder, create a quasar.client.ts file.
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)

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?

stefanvanherwijnen · 2022-08-03T09:08:32Z

Quasar has its own SSR logic and functions which need to be handled appropriately. In contrast to most UI frameworks, Quasar has built in support for SSR and things are rendered differently depending on if its rendered on the server or the client:

quasar/ui/src/plugins/Platform.js

Lines 14 to 20 in ac8441d

    
           export const isRuntimeSsrPreHydration = __QUASAR_SSR_SERVER__ 
        
             ? { value: true } 
        
             : ref( 
        
               __QUASAR_SSR_CLIENT__ && ( 
        
                 __QUASAR_SSR_PWA__ ? document.body.getAttribute('data-server-rendered') !== null : true 
        
               ) 
        
             )

Quasar only officially supports using @quasar/app-vite. It is possible to use Quasar SSR with Nuxt, but Nuxt will have to add support for Quasar. It definitely is possible, but not without some workarounds.

If you want to use SSR with Quasar, use Quasar CLI.

stefanvanherwijnen · 2022-08-08T17:42:07Z

Providing SSR rendered Quasar components to Nuxt seems pretty straight forward (replace the platform variables with the correct import.meta.env.SSR value and build from src), but in order to prevent hydration errors the generated HTML needs to be transformed.

If any experienced Nuxt user knows how to do this, it should be possible to have Quasar SSR support in Nuxt.

angelhdzdev · 2022-08-08T18:17:36Z

Im new to Nuxt and to SSR. No idea. I just wanted to have Quasar as UI in Nuxt instead of Vuetify.

TomMiller-mas · 2022-08-10T03:33:07Z

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.

Not with the latest and greatest Nuxt 3 and your latest components.

,
"dependencies": {
"@quasar/extras": "^1.15.1",
"nuxt": "^3.0.0-rc.6",
"quasar": "^2.7.7"
},
"devDependencies": {
"@quasar/vite-plugin": "^1.1.1",
"sass": "1.32.0"
}

node 16.15.1

nuxt.conifg.ts => Should just be i**mport { defineNuxtConfig } from "nuxt";**

And I get these errors. Something in the syntax must have changed for registering components. I am completely new with your product and would appreciate a little help. Thanks!

[Vue warn]: Failed to resolve component: q-layout
[Vue warn]: Failed to resolve component: q-header
[Vue warn]: Failed to resolve component: q-toolbar
[Vue warn]: Failed to resolve component: q-btn
[Vue warn]: Failed to resolve component: q-toolbar-title
[Vue warn]: Failed to resolve component: q-drawer
[Vue warn]: Failed to resolve component: q-list
[Vue warn]: Failed to resolve component: q-item-label
[Vue warn]: Failed to resolve component: q-item
[Vue warn]: Failed to resolve component: q-item-section
[Vue warn]: Failed to resolve component: q-icon
[Vue warn]: Failed to resolve component: q-page-container

TomMiller-mas · 2022-08-10T14:22:59Z

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.

This solved my warning problems. It seems to be working with the original template with just two changes. Both of them are in the nuxt.config.ts.

piscis · 2022-11-12T17:05:15Z

There is an update for Nuxt3 (now rc13) and Quasar 2 here: https://github.com/piscis/nuxt-quasar-boilerplate

By using JSDOM as server plugin and mocking browser dependencies it is now possible to run a full SSR build. But for complicated layouts using q-layout there are still hydration errors probably caused by resize observer.

Demo: https://nuxt3-quasar.piscis.io/

angelhdzdev · 2022-11-13T23:14:28Z

Im new to Nuxt and to SSR. No idea. I just wanted to have Quasar as UI in Nuxt instead of Vuetify.

@Jason What was funny about my message!?

JasonLandbridge · 2022-12-11T20:34:08Z

Im new to Nuxt and to SSR. No idea. I just wanted to have Quasar as UI in Nuxt instead of Vuetify.

@Jason What was funny about my message!?

@angelhdzmultimedia, I found it funny because I had the exact same mindset. All the other emoticons didn't accurately describe on how I felt about your comment, so I choose the laughing one.

angelhdzdev · 2022-12-11T20:42:06Z

Im new to Nuxt and to SSR. No idea. I just wanted to have Quasar as UI in Nuxt instead of Vuetify.

@Jason What was funny about my message!?

@angelhdzmultimedia, I found it funny because I had the exact same mindset. All the other emoticons didn't accurately describe on how I felt about your comment, so I choose the laughing one.

Oooh. That makes sense. My apologies for being paranoid but I've received the laughing reaction before as a way of judging my answers so I'm always in full paranoia mode, also I suffer from generalized anxiety.

So cool that other people faced the same wall I faced with Nuxt+ Quasar. Hope there's an official solution soon other than disabling SSR and making then app an SPA one.

Also, I'm considering trying Quasar CLI + Vite and its SSR.

Thank you for your time! Cheers.

NikolaStojicic · 2023-01-30T02:04:01Z

@angelhdzmultimedia I had similar issue and went with Quasar + Vite route.

Copied most of Vite plugins from https://github.com/antfu/vitesse to make Quasar feel more like Nuxt (auto-imports of components, pages, layouts etc).

Using it's SSR with tRPC v10 for backend.

Pretty good DX, a bit slow to start due to bloat of plugins strapped.

buithaibinh · 2023-01-30T02:38:00Z

By using JSDOM to mock the DOM, we can use Quasar 2 with Nuxt 3. You can refer to this article for more details.

Quasar 2 with Nuxt3

import { JSDOM } from "jsdom";

const dom = new JSDOM(
  "<!DOCTYPE html><head></head><body><h1>FAKE DOM</h1></body></html>",
  {
    url: "https://example.org/",
    referrer: "https://example.com/",
    contentType: "text/html",
    includeNodeLocations: true,
    storageQuota: 10000000,
  }
);

const { XMLHttpRequest } = dom.window;
global.XMLHttpRequest = XMLHttpRequest;
// @ts-ignore
global.window = dom.window;
global.navigator = dom.window.navigator;
global.document = dom.window.document;
// @ts-ignore
global.FileList = dom.window.FileList;
global.File = dom.window.File;
global.getComputedStyle = dom.window.getComputedStyle;

export default defineNuxtPlugin((_nuxtApp): void => {});

NikolaStojicic · 2023-01-30T04:11:18Z

By using JSDOM to mock the DOM, we can use Quasar 2 with Nuxt 3. You can refer to this article for more details.

Quasar 2 with Nuxt3

import { JSDOM } from "jsdom";

const dom = new JSDOM(
  "<!DOCTYPE html><head></head><body><h1>FAKE DOM</h1></body></html>",
  {
    url: "https://example.org/",
    referrer: "https://example.com/",
    contentType: "text/html",
    includeNodeLocations: true,
    storageQuota: 10000000,
  }
);

const { XMLHttpRequest } = dom.window;
global.XMLHttpRequest = XMLHttpRequest;
// @ts-ignore
global.window = dom.window;
global.navigator = dom.window.navigator;
global.document = dom.window.document;
// @ts-ignore
global.FileList = dom.window.FileList;
global.File = dom.window.File;
global.getComputedStyle = dom.window.getComputedStyle;

export default defineNuxtPlugin((_nuxtApp): void => {});

Does not this approach disable Quasar CLI?

angelhdzdev · 2023-01-30T05:09:00Z

@angelhdzmultimedia I had similar issue and went with Quasar + Vite route.

Copied most of Vite plugins from https://github.com/antfu/vitesse to make Quasar feel more like Nuxt (auto-imports of components, pages, layouts etc).

Using it's SSR with tRPC v10 for backend.

Pretty good DX, a bit slow to start due to bloat of plugins strapped.

Yup, same here. I went full Quasar with router/layouts/modules auto-import .
Could deploy to Android with Capacitor and Desktop with Electron.

But then I got back to Nuxt 3 to check if support for Quasar was added after Vuetify 3 was released.
And I realized I didn't need SSR so I turned SSR off and then Quasar worked as a SPA.

With Nuxt 3, we have the auto-imports already. No need to install bunch of packages.
I hope Quasar team adds a module/plugin for Nuxt 3 so we could be free to use Quasar only as an UI library and not being tied to their ecosystem and that also they add auto-imports in Quasar Vite CLI project.

buithaibinh · 2023-01-30T08:23:35Z

Does not this approach disable Quasar CLI?

@NikolaStojicic ,
Yes, you cannot use quasar cli and Nuxt together. Nuxt 3 also does not support the quasar.conf.js file

angelhdzdev · 2023-02-09T06:11:14Z

There is an update for Nuxt3 (now rc13) and Quasar 2 here: https://github.com/piscis/nuxt-quasar-boilerplate

By using JSDOM as server plugin and mocking browser dependencies it is now possible to run a full SSR build. But for complicated layouts using q-layout there are still hydration errors probably caused by resize observer.

Demo: https://nuxt3-quasar.piscis.io/

Got it working thanks.
Though any ideas how to get rid of these Vue warnings?

I followed the boilerplate carefully. Nuxt config is the same. fake-dom.server.ts is the same.
quasar.client.ts is the same.

piscis · 2023-02-09T14:34:10Z

Hello everybody, I did some more work on this topic and now it seems, that fully SSR support with quasar is possible. To get SSR to work I used the happy-dom package which has a far better DOM implementation as JSDOM when using it together with Quasar and Nuxt. JSDOM is not needed anymore and the implementation for the fake-dom part are basically 3 lines of code:

https://github.com/piscis/nuxt-quasar-boilerplate/blob/main/plugins/fake-dom.server.ts

A boilerplate with the full source code can be found here: https://github.com/piscis/nuxt-quasar-boilerplate/ and the demo is here: https://github.com/piscis/nuxt-quasar-boilerplate

piscis · 2023-02-09T14:41:05Z

Also please note what gets promoted here #11165 (comment) a old implementation with JSDOM. This is problematic when it comes to SSR and Quasar because some APIs quasar needs are not provided via JSDOM and lead to rehydration errors with q-layout / q-page when used with Nuxt3 + SSR

xuzuodong · 2023-02-13T03:27:34Z

@piscis What you've done is quite nice, do you think it's possible to go further and make it a nuxt module, just like element-plus?

piscis · 2023-02-13T11:16:43Z

@xuzuodong yes that is possible I guess. The biggest problem with the current implementation is that you need to wire everything by hand in a plugin. If this is covered via a module, we would need some sort of component configuration. I already toke some inspiration from https://github.com/sfxcode/nuxt-primevue to see how they solve it for primevue

rstoenescu · 2023-02-18T09:35:09Z

Closing this as using our CLI(s) to develop SSR is the official way to go, at least for now. And this ticket is confusing some developers into thinking that Quasar does not supports SSR, which couldn't be more WRONG.

Our Vite plugin supports SSR through its params (configures all the __QUASAR__* aliases for both client and server), but it may or may not not be enough when it comes to Nuxt. Currently, we don't have time to fully investigate or create a Nuxt plugin due to the heavy load with our current tooling. This may however change in the future and we will make sure to announce it, but Nuxt is not currently on our radar because through our CLIs we have greater control over the SSR experience and we can make it be as efficient as possible.

Everyone please feel free to still comment on this thread with your findings, but again, take into account that our Vite plugin has specific params for SSR. https://github.com/quasarframework/quasar/blob/dev/vite-plugin/index.d.ts#L32

angelhdzdev · 2023-02-19T00:16:05Z

Closing this as using our CLI(s) to develop SSR is the official way to go, at least for now. And this ticket is confusing some developers into thinking that Quasar does not supports SSR, which couldn't be more WRONG.

Our Vite plugin supports SSR through its params (configures all the __QUASAR__* aliases for both client and server), but it may or may not not be enough when it comes to Nuxt. Currently, we don't have time to fully investigate or create a Nuxt plugin due to the heavy load with our current tooling. This may however change in the future and we will make sure to announce it, but Nuxt is not currently on our radar because through our CLIs we have greater control over the SSR experience and we can make it be as efficient as possible.

Everyone please feel free to still comment on this thread with your findings, but again, take into account that our Vite plugin has specific params for SSR. https://github.com/quasarframework/quasar/blob/dev/vite-plugin/index.d.ts#L32

Thank you! I have a question:
Does quasar in SSR mode, have layouts, routes/pages, and modules auto-imports, or do we still have to rely in packages like unplugin-vue-router, unplugin-auto-import, and vite-plugin-vue-layouts to achieve it?

That's the reason I've been working with Nuxt 3 lately instead of Quasar with Vite.

Maiquu · 2023-03-07T18:20:07Z

Using @quasar/vite-plugin as a reference, and a bit of inspiration from @element-plus/nuxt, I implemented a Quasar Module for Nuxt. Feedback would be very appreciated.

Do keep in mind that there are hydration issues with some of the Quasar components at the moment. (q-drawer in particular)

angelhdzdev · 2023-03-07T22:41:25Z

Using @quasar/vite-plugin as a reference, and a bit of inspiration from @element-plus/nuxt, I implemented a Quasar Module for Nuxt. Feedback would be very appreciated.

Do keep in mind that there are hydration issues with some of the Quasar components at the moment. (q-drawer in particular)

Will try it tonight, thanks!

angelhdzdev · 2023-03-09T21:27:19Z

Using @quasar/vite-plugin as a reference, and a bit of inspiration from @element-plus/nuxt, I implemented a Quasar Module for Nuxt. Feedback would be very appreciated.

Do keep in mind that there are hydration issues with some of the Quasar components at the moment. (q-drawer in particular)

Tried it. It works great. Looked at the source code.

Are you using jsdom or @happy-dom/global-registrator to avoid the "undefined property window" errors? Or did you found another way?

Maiquu · 2023-03-10T09:37:57Z

Are you using jsdom or @happy-dom/global-registrator to avoid the "undefined property window" errors? Or did you found another way?

Window errors are due to @quasar/vite-plugin resolving quasar imports to quasar/dist/quasar.esm.js file which is most likely bundled for clients.

Instead of resolving imports to quasar/dist files, I resolve each import directly to their quasar/src equivalents which contains the necessary flags to compile them for both server and client. It results in more file read operations but performance difference is not very noticeable.

angelhdzdev · 2023-03-10T17:54:06Z

Using @quasar/vite-plugin as a reference, and a bit of inspiration from @element-plus/nuxt, I implemented a Quasar Module for Nuxt. Feedback would be very appreciated.

Do keep in mind that there are hydration issues with some of the Quasar components at the moment. (q-drawer in particular)

Hey @piscis, not intend to bother you. Just wanted you to noticed this solution and know your thoughts.
To me it looks great so far and the fact that it's a nuxt module, that does the heavy load for us, it's even better!
Maybe you can benefit from it.

Wishing you all health, peace, and success!

Have fun! 😊🔥🤝☕

septatrix · 2023-03-11T00:36:29Z

Using @quasar/vite-plugin as a reference, and a bit of inspiration from @element-plus/nuxt, I implemented a Quasar Module for Nuxt. Feedback would be very appreciated.

I will try this out for a new project I am currently working on, at a first glance (2h playing around) it seems to work fine.

Do keep in mind that there are hydration issues with some of the Quasar components at the moment. (q-drawer in particular)

I did not stumble upon this yet, though if it becomes to troublesome I am luckily in the position where I could also live without SSR. I am mostly using Quasar for the great components.

Does quasar in SSR mode, have layouts, routes/pages, and modules auto-imports, or do we still have to rely in packages like unplugin-vue-router, unplugin-auto-import, and vite-plugin-vue-layouts to achieve it?

This is also our main motivation for Nuxt. We mostly use Quasar as a component library and Nuxt for the file based routing, (typed) API routes, but also some other neat modules (though some of those have yet to be ported to Nuxt 3).

piscis added the kind/feature 💡 label Oct 30, 2021

piscis changed the title ~~Question: Quasar + Nuxt3 + SSR~~ Quasar + Nuxt3 + SSR Oct 30, 2021

rstoenescu closed this as completed Feb 18, 2023

angelhdzdev mentioned this issue Mar 16, 2023

Quasar, Nuxt3 SSR: window is not defined #11281

Closed

Quasar + Nuxt3 + SSR #11165

Quasar + Nuxt3 + SSR #11165

Comments

piscis commented Oct 30, 2021 • edited Loading

JeRabix commented Oct 30, 2021

piscis commented Oct 30, 2021

webfansplz commented Nov 8, 2021

webfansplz commented Nov 8, 2021

piscis commented Nov 8, 2021

hawkeye64 commented Nov 8, 2021

stefanvanherwijnen commented Nov 15, 2021

piscis commented Dec 6, 2021 • edited Loading

angelhdzdev commented Aug 3, 2022

stefanvanherwijnen commented Aug 3, 2022

stefanvanherwijnen commented Aug 8, 2022

angelhdzdev commented Aug 8, 2022

TomMiller-mas commented Aug 10, 2022

TomMiller-mas commented Aug 10, 2022

piscis commented Nov 12, 2022 • edited Loading

angelhdzdev commented Nov 13, 2022

JasonLandbridge commented Dec 11, 2022 • edited Loading

angelhdzdev commented Dec 11, 2022 • edited Loading

NikolaStojicic commented Jan 30, 2023

buithaibinh commented Jan 30, 2023

NikolaStojicic commented Jan 30, 2023

angelhdzdev commented Jan 30, 2023 • edited Loading

buithaibinh commented Jan 30, 2023

angelhdzdev commented Feb 9, 2023

piscis commented Feb 9, 2023 • edited Loading

piscis commented Feb 9, 2023 • edited Loading

xuzuodong commented Feb 13, 2023

piscis commented Feb 13, 2023 • edited Loading

rstoenescu commented Feb 18, 2023

angelhdzdev commented Feb 19, 2023

Maiquu commented Mar 7, 2023 • edited Loading

angelhdzdev commented Mar 7, 2023

angelhdzdev commented Mar 9, 2023

Maiquu commented Mar 10, 2023

angelhdzdev commented Mar 10, 2023

septatrix commented Mar 11, 2023

piscis commented Oct 30, 2021 •

edited

Loading

piscis commented Dec 6, 2021 •

edited

Loading

piscis commented Nov 12, 2022 •

edited

Loading

JasonLandbridge commented Dec 11, 2022 •

edited

Loading

angelhdzdev commented Dec 11, 2022 •

edited

Loading

angelhdzdev commented Jan 30, 2023 •

edited

Loading

piscis commented Feb 9, 2023 •

edited

Loading

piscis commented Feb 9, 2023 •

edited

Loading

piscis commented Feb 13, 2023 •

edited

Loading

Maiquu commented Mar 7, 2023 •

edited

Loading