Upgrade Guide

The 0.1.0 release-candidate line moves the Quasar app extensions, including Q-Press, to the Quasar CLI Vite 3 RC toolchain. It is the right version to use when your Quasar application is being upgraded to @quasar/app-vite >=3.0.0-rc.2.

WARNING

Q-Press and the Quasar app extension packages now target Quasar Vite projects using @quasar/app-vite >=3.0.0-rc.2. They are not intended for Webpack projects or JavaScript-only Quasar projects.

TIP

The core Markdown-it plugins and direct Vite plugins are not Quasar-only. You can use packages such as @md-plugins/vite-md-plugin, @md-plugins/vite-examples-plugin, and the individual @md-plugins/md-plugin-* packages in Vue/Vite projects without installing a Quasar app extension.

Before You Upgrade

  • For Q-Press or the Quasar app extensions, make sure your app is already on a Quasar Vite setup.
  • For Q-Press or the Quasar app extensions, upgrade the app to @quasar/app-vite >=3.0.0-rc.2.
  • Use TypeScript in the consuming Quasar project when using the Quasar app extensions.
  • Import defineConfig in quasar.config.ts directly from @quasar/app-vite.
  • Use /// <reference types="@quasar/app-vite/client" /> in src/env.d.ts.
  • Commit or stash local changes before invoking Q-Press, because the update flow can overwrite files in src/.q-press.

Update Packages

For Q-Press projects, update the app extension package and then invoke it:


pnpm up @md-plugins/quasar-app-extension-q-press

Then invoke the app extension:

quasar ext invoke @md-plugins/q-press

When prompted, choose Overwrite All if you want the generated Q-Press files to match the release-candidate templates.

For direct Vite plugin usage, update the packages you consume:


pnpm up @md-plugins/vite-md-plugin @md-plugins/vite-examples-plugin

Remove App-Level Shared Imports

Q-Press applications should not install or import @md-plugins/shared directly. The shared package remains part of the MD-Plugins internals, but app-level Q-Press files should use the helpers generated into the app.

If your project has this dependency, remove it from the consuming app:


pnpm remove @md-plugins/shared

If you have customized generated files and cannot choose Overwrite All, update copied Q-Press files that import slugify from @md-plugins/shared.

Use the local helper from src/.q-press/components/markdown-utils.ts instead:

import { slugify } from './markdown-utils'

For files outside src/.q-press/components, import from the generated helper path used by that file. For example:

import { slugify } from '@/.q-press/components/markdown-utils'

or:

import { slugify } from '../.q-press/components/markdown-utils'

Q-Press Type Globals

Q-Press now provides its shared Markdown, menu and ImportMeta globals directly from the app extension package. After upgrading to this release line and running quasar prepare, projects no longer need to keep a local src/q-press.globals.d.ts file.

If you still see type errors for TocMenuItem, MenuItem, MarkdownModule, import.meta.glob or Quasar import.meta.env values, run:

quasar prepare

Then make sure the app is using the updated @md-plugins/quasar-app-extension-q-press package.

Environment Variable Changes

Quasar CLI Vite 3 exposes runtime flags through import.meta.env. If you copied older Q-Press internals into your own code, update them:

Old patternNew pattern
process.env.CLIENTimport.meta.env.QUASAR_CLIENT
process.env.SERVERimport.meta.env.QUASAR_SERVER
process.env.DEVimport.meta.env.QUASAR_DEV
process.env.PRODimport.meta.env.QUASAR_PROD
process.env.VUE_ROUTER_MODEimport.meta.env.QUASAR_VUE_ROUTER_MODE
process.env.VUE_ROUTER_BASEimport.meta.env.QUASAR_VUE_ROUTER_BASE

Q-Press also uses QCLI_* values for Quasar CLI provided build-time values, such as search index and filesystem paths.

Example Action Updates

The release-candidate templates include updated example actions for GitHub source links and CodePen playgrounds. If your project keeps customized Q-Press files, compare your copies of these files with the current template:

  • src/.q-press/components/MarkdownExample.vue
  • src/.q-press/components/MarkdownCodepen.vue
  • src/.q-press/components/markdown-utils.ts
  • src/siteConfig/index.ts

Set siteConfig.githubSourceRootSrc when the source-view link should point at generated example files instead of edit links. Configure siteConfig.codepen when examples need external CSS, JavaScript, setup code, package globals or a project-specific titleSuffix.

Vite Plugin Configuration

viteMdPlugin should be configured with an options object:

import { viteMdPlugin, type MenuItem } from '@md-plugins/vite-md-plugin'

vitePlugins: [
  viteMdPlugin({
    path: ctx.appPaths.srcDir + '/markdown',
    menu: sidebar as MenuItem[],
  }),
]

Verify The Upgrade

Run these checks in the consuming app:

pnpm install
quasar prepare
quasar build

If you use linting or formatting, run those checks after invoking Q-Press so any regenerated files are included.