DOCSEARCHbyAlgolia
Submit Docs

Quasar Framework

repository·dev·Indexed 12 days ago

https://github.com/quasarframework/quasar

A high-performance Vue.js-based framework for building multiple application types from a single codebase, including SPA, SSR, SSG, PWA, Mobile (via Capacitor or Cordova), Electron, and Browser Extensions. Includes a dedicated CLI for development and build processes, and the @quasar/extras package for optimized webfonts and SVG icons.

Tokens
361.1K
Snippets
1.2K
Records
1.5K
Agent score
92%

What's inside Quasar

  1. What is Quasar Framework?

    dev

    Quasar is an MIT-licensed, open-source framework based on Vue.js designed to allow developers to write a single codebase and simultaneously deploy it across multiple platforms. It provides a state-of-the-art UI following Material Guidelines and is highly performance-focused with automatic tree-shaking.

    Supported Build Modes

    You can use one codebase to create:

    • SPAs (Single Page Apps)
    • SSR (Server-side Rendered Apps) with optional PWA client takeover
    • SSG (Static Site Generator Apps) with optional PWA client takeover and optional partial CSR
    • PWAs (Progressive Web Apps)
    • BEX (Browser Extensions)
    • Mobile Apps (Android, iOS, etc.) via Cordova or Capacitor
    • Desktop Apps (Multi-platform) via Electron

  2. Overview of @quasar/extras

    dev
    The @quasar/extras package provides a centralized collection of assets designed to work seamlessly with the Quasar Framework. It includes webfonts, SVG icons, and other essential UI resources. By using this package, you benefit from optimized download times (as it strips down unnecessary files) and improved reliability, specifically addressing issues where the standard Material Icons npm package might fail to download correctly.

  3. Overview of the Quasar Framework CLI

    dev

    The Quasar Framework CLI is a tool used to build high-performance Vue.js user interfaces from a single codebase. It supports multiple deployment targets including:

    • Single Page Apps (SPA)
    • Server-Side Rendering (SSR) Apps
    • Static Site Generation (SSG) Apps
    • Progressive Web Apps (PWA)
    • Browser Extensions
    • Hybrid Mobile Apps (via Capacitor or Cordova)
    • Electron Apps

  4. Introduction to Quasar Browser Extension (BEX) mode

    dev

    Quasar BEX mode allows you to build Browser Extensions using the Quasar Framework. Browser Extensions are applications built with web technologies (HTML, JavaScript, CSS) that run in browser-managed contexts to customize the browser or the pages it displays.

    Capabilities of a BEX include:

    • Overriding page content
    • Adding to or altering the browser's interface
    • Intercepting page requests
    • Running as a full-featured application within the browser
    • Interacting with and altering browser development tools

    When using Quasar BEX mode, you can leverage the same simplicity and features found in other Quasar modes (like SPA or SSR) to build these specialized applications.

  5. Overview of Quasar Framework capabilities

    dev

    Quasar Framework is a high-performance Vue.js framework designed to build multiple types of applications from a single codebase. It allows developers to target various platforms including:

    • Single Page Apps (SPA): Responsive web applications.
    • SSR Apps: Server-Side Rendered applications.
    • SSG Apps: Static Site Generated applications.
    • PWAs: Progressive Web Apps.
    • Browser Extensions: Extensions for modern web browsers.
    • Hybrid Mobile Apps: Mobile applications using technologies like Capacitor.
    • Electron Apps: Desktop applications for Windows, macOS, and Linux.

  6. What's new in Icon Genie v2

    dev

    Icon Genie v2 introduces several major changes and features:

    • Standalone CLI: No longer a Quasar App Extension; install it globally.
    • Flexible Inputs: Input files can have any name and any dimensions (minimum 64x64px for icons). Icons are automatically trimmed.
    • Improved Splash Screens: Splash screens are generated by placing the icon on top of an optional background. You can control the icon size using the --splashscreen-icon-ratio parameter (setting it to 0 removes the icon).
    • New Commands:
      • generate: Creates assets and provides required HTML tags.
      • verify: Checks if files are in the correct locations and have correct dimensions.
      • profile: Enables automation via profile files.
    • Granular Control: Use parameters like --filter, --quality, svg-color, png-color, and splashscreen-color to control assets for individual Quasar modes (e.g., .ico vs .png).
    • Automation: Supports profile files for automated generation and custom image creation via the API.

  9. Use the Quasar Meta Plugin for SEO

    dev

    The Meta plugin allows you to dynamically manage <meta>, <style>, and <script> tags, as well as <html> and <body> attributes and the document title. This is highly recommended for SSR (Server-Side Rendering) and SSG (Static Site Generation) builds to ensure SEO crawlers can read your metadata.

    Important: To avoid duplication, remove any static meta tags from your index.html template if you intend to manage them via the Meta plugin.

  11. Use QEditor for WYSIWYG editing

    dev

    QEditor is a WYSIWYG (What You See Is What You Get) component that allows users to write and paste HTML using the browser's contentEditable interface.

    Security Warning: When rendering the content produced by QEditor using v-html, your application is vulnerable to Cross-Site Scripting (XSS) attacks. If the content is user-generated, you must sanitize it on the client or server side before rendering.

    <q-editor v-model="model" />