Quasar Performance Checklist for Production Apps

Shipping fast is great. Keeping your app fast is better. Use this checklist to keep Quasar apps responsive as your UI scales.

Bundle and Route Strategy

• Use lazy loaded pages for heavy routes:

			const routes = [
    {
        path: "/reports",
        component: () => import("./pages/Reports.vue"),
    },
];

		

• Split routes with dynamic imports
• Keep shared layout logic in layouts
• Avoid heavy components on initial load

Image and Asset Discipline

• Use modern formats like WebP or SVG
• Compress images and provide sizes
• Prefer SVG icons over large PNGs

Component Rendering

• Avoid v-for on large datasets without pagination
• Memoize expensive computed data
• Use v-show instead of v-if when toggling often

CSS and Animation

• Keep animations on transform and opacity
• Avoid heavy box-shadows on large lists
• Use Quasar utility classes to reduce custom CSS

Summary

Performance is a feature. Quasar gives you great defaults, but your decisions still matter. Keep this checklist handy and review it before every release.