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
SSG with TypeScript

Warning! Beta Stage

The Quasar SSG Mode is currently in the “beta” stage. Based on the community feedback, the API may change in the future, so check the release notes each time you upgrade “@quasar/app-vite”.

When SSG mode is added to a TypeScript project, Quasar creates /src-ssg/ssg-renderer.ts automatically. In an existing JavaScript setup, rename ssg-renderer.js to ssg-renderer.ts; Quasar discovers either extension.

The wrapper functions infer their callback and return types:

/src-ssg/ssg-renderer.ts

import { defineSsgGetPages } from '#q-app'
import routes from '@/router/routes'

export const getSsgPages = defineSsgGetPages(
  async ({ parseVueRouterRoutes }) => {
    const { ssgPages } = await parseVueRouterRoutes({ routes, verbose: true })
    return ssgPages
  }
)

Dependencies imported only by the renderer belong in /src-ssg/package.json. If a dependency does not include its own declarations, install its @types/* package there as a development dependency.