Why donate
API Explorer
Upgrade Guide
Creating a New Project
The /quasar.config File
Convert q/app-webpack Project
Browser Compatibility
TypeScript Support
Directory Structure
Commands List
CSS Preprocessors
Page Routing with VueRouter
Lazy Loading - Code Splitting
Handling Assets
Boot Files
Prefetch Feature
API Proxying
Handling Vite
Handling import.meta.env
State Management with Pinia
Lint and Format Code
Testing & Auditing
Developing Mobile Apps
Ajax Requests
Opening Dev Server To Public
Quasar CLI with Vite - @quasar/app-vite v3
Preparation for SSR

We’ll be using Quasar CLI to develop and build a SSR website. The difference between building a SPA, Mobile App, Electron App, PWA or SSR is simply determined by the “mode” parameter in “quasar dev” and “quasar build” commands.

In order to develop or build a SSR website, we first need to add the SSR mode to our Quasar project:

quasar mode add ssr

If you want to jump right in and start developing, you can skip the “quasar mode” command and issue:

quasar dev -m ssr

This will add SSR mode automatically, if it is missing.

After answering the question of what webserver you want to use (Hono/Express/Fastify/etc), a new folder will appear in your project folder (which is explained in detail on the Configuring SSR page):

server-assets/
# copied as-is to dist
render.js
# (or .ts) middleware to render pages with Vue
server.js
# (or .ts) SSR webserver
package.json
# helps install SSR only deps directly under /src-ssr