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
Hybrid SSR with partial CSR

Quasar CLI allows you to build a hybrid SSR with partial CSR (Client-Side Rendering). This is helpful for cases where you want some of your pages to be rendered exclusively on the client side.

This feature is available in “@quasar/app-vite” v3.1+

Configuration

You can instruct the Quasar CLI what Vue Router routes should be handled exclusively on the client side:

/quasar.config file

ssr: {
  /**
   * Configure this for a hybrid SSR + partial CSR (Client-Side Rendering)
   * approach, where you have some Vue Router routes that you want to be
   * rendered on the client-side exclusively.
   *
   * You can use picomatch patterns to match the routes you want to be rendered
   * on the client-side. https://www.npmjs.com/package/picomatch
   *
   * Note on picomatch patterns:
   *   "/admin" matches the exact route only
   *   "/admin/**" matches the exact route and all sub-routes of /admin
   *   "/admin/*" matches only direct sub-routes of /admin
   *   "/admin/{users,settings}" matches both exact routes /admin/users and /admin/settings
   *
   * @example ['/dashboard', '/admin/**']
   * @default ssg.clientSideRenderingRoutes (when configured), otherwise []
   */
  clientSideRenderingRoutes?: string[];
}