Quasar Framework Extras

2.0.9 verified Sat Apr 25 auth: no javascript

Quasar Extras is a collection of essential static assets, including popular icon sets like Material Icons, Material Design Icons (MDI), Font Awesome, and Ionicons, alongside the Roboto font and Animate.css for animations. It is designed to integrate seamlessly with the Quasar Framework, a Vue.js-based UI framework for building various application types. The current stable version is 2.0.9, and the package receives updates as its bundled upstream assets are updated, reflecting a consistent maintenance cadence. Its key differentiators include optimizing asset bundles by stripping unnecessary files for faster downloads, consolidating these assets in a single, tested package tailored for Quasar, and providing a reliable way to include assets like Material Icons, circumventing common npm installation issues with their native packages.

Common errors

error Error: Module not found: Error: Can't resolve 'material-icons' in '/path/to/your/project' ↓

cause Attempting to directly `import 'material-icons'` in JavaScript or CSS, or Webpack failing to resolve the asset despite `quasar.conf.js` configuration.

fix

Ensure 'material-icons' is correctly added to the extras array within the framework object in your quasar.conf.js (or quasar.config.js). This package integrates assets via configuration, not direct module imports.

error Icons are not displaying correctly or are missing after updating `quasar-extras`. ↓

cause This usually indicates either a breaking change in an included icon set (e.g., Ionicons v4 in `quasar-extras` v2.0.0) where icon names or classes changed, or incorrect icon class names being used in your application code.

fix

Verify that your extras configuration in quasar.conf.js (or quasar.config.js) is correct and that the desired icon sets are enabled. If you recently updated quasar-extras, consult the release notes for any breaking changes related to specific icon sets and update your icon class names according to their respective documentation.

error Animate.css animations are not working in my Quasar application. ↓

cause The `animations` property in `quasar.conf.js` (or `quasar.config.js`) is either not configured, or the animation class names used in your components do not match those provided by Animate.css.

fix

Ensure the animations property is set in your quasar.conf.js (or quasar.config.js). For example, set animations: 'all' to include all animations, or provide an array of specific animation names like animations: ['fadeIn', 'fadeOut']. Then, double-check the animation class names in your components against the Animate.css documentation.

Warnings

breaking Upgrading to `quasar-extras` v2.0.0 (or newer) includes Ionicons v4.1.1, which introduced breaking changes compared to previous Ionicons v2.x versions. Icon names and usage patterns may have changed, requiring updates in your application code. ↓

fix Refer to the Ionicons v4 documentation for updated icon names and usage. Update your application's icon references accordingly. For Quasar v1 and below, consider staying on `quasar-extras` v1.x if Ionicons v2 compatibility is critical.

gotcha `quasar-extras` is a collection of static assets (fonts, icon fonts, CSS animations) intended for configuration within a Quasar Framework project via `quasar.conf.js` (or `quasar.config.js`). It does not expose JavaScript modules for direct `import` or `require` statements. ↓

fix Configure desired extras by adding their names to the `extras` array or `animations` property in your project's `quasar.conf.js` (or `quasar.config.js`) file. Do not attempt to import them like regular npm packages in your JavaScript or style files.

gotcha The `quasar-extras` package bundles specific, often slightly older, versions of third-party assets (e.g., Font Awesome 5.5.0, MDI 3.0.39 as of `quasar-extras@2.0.9`). If your project explicitly requires a newer or specific external asset version not bundled, updating `quasar-extras` might not provide it, or it may conflict with a manually added, newer version. ↓

fix Check the `quasar-extras` README or release notes for the bundled versions of specific assets. If a different external asset version is required, you might need to include that asset manually in your project, overriding or augmenting what `quasar-extras` provides.

Install

npm install quasar-extras

yarn add quasar-extras

pnpm add quasar-extras

Imports

Material Icons (via config)
wrong
```
import 'material-icons'
```
correct
```
module.exports = function (ctx) {
  return {
    extras: [
      'material-icons'
    ]
  }
}
```
This package provides assets configured through `quasar.conf.js` (or `quasar.config.js` in Quasar v2+), not via direct JavaScript or CSS `@import` statements. Adding `'material-icons'` to the `extras` array makes the font available globally in your Quasar app.
Font Awesome (via config)
wrong
```
import '@fortawesome/fontawesome-svg-core'
```
correct
```
module.exports = function (ctx) {
  return {
    extras: [
      'fontawesome'
    ]
  }
}
```
Similar to other extras, Font Awesome is enabled by adding `'fontawesome'` to the `extras` array in `quasar.conf.js`. This provides the Font Awesome CSS, making the icons available for use in your Quasar components.
Animate.css (via config)
wrong
```
import 'animate.css'
```
correct
```
module.exports = function (ctx) {
  return {
    animations: 'all' // or an array like ['bounceInDown', 'bounceOutUp']
  }
}
```
Animate.css is enabled via the `animations` property in `quasar.conf.js`. Setting it to `'all'` includes all animations, while specifying an array of desired animations helps optimize bundle size.

Quickstart

Demonstrates how to enable multiple font, icon, and animation sets within your Quasar Framework project's configuration file.

// quasar.conf.js (or quasar.config.js for Quasar v2+)
// This file runs in a Node context, so use only ES6 features supported by your Node version.

const { configure } = require('quasar/wrappers')

module.exports = configure(function (ctx) {
  return {
    // Quasar Framework extras
    extras: [
      'roboto-font',
      'material-icons', // Material Design Icons
      'mdi',            // Material Design Icons (Community)
      'fontawesome',    // Font Awesome 5
      'ionicons'        // Ionicons 4 (Note: v2.0.0+ ships Ionicons v4+)
    ],

    // Animate.css animations
    animations: 'all' // or specify an array of specific animations: ['bounceInLeft', 'bounceOutRight']

    // ... other Quasar config options
  }
})