disable quasar vue framework auto import of components for improved build size

quasar.conf.js

module.exports = configure(function (ctx) {
  return {
    // disabled for js reduction
    vendor: {
      disable: true,
    },

    build: {
      // the disabling part of quasar auto import
      // found some outdated code online and updated it to work with latest quasar
      // quasar ^2.3.0
      extendWebpack(cfg, { isServer, isClient }) {
        if (isClient) {
          // delete the auto import loader
          for (const rule of cfg.module.rules) {
            if (!rule.use) {
              continue;
            }

            if (
              rule.use.length &&
              (rule.use[0].loader.endsWith("transform-quasar-imports.js") ||
                rule.use[0].loader.endsWith("auto-import-quasar.js"))
            ) {
              rule.use.splice(0, 1);
              break;
            }
          }
        }
      },
    },
 
    framework: {
      // id leave this auto because its actually disabled in extendWebpack
      importStrategy: "auto",

      // manually import MOST USED components
      // for other components import them directly like this
      // import { QSomething } from "quasar";
      components: [
        "QBtn",
        "QToolbarTitle",
        "QRouteTab",
        "QTabs",
        "QToolbar",
        "QHeader",
        "QScrollArea",
        "QPage",
        "QPageContainer",
        "QLayout",
      ],
      // manually import directives
      directives: [],

      // manually import plugins
      plugins: ["LoadingBar"],
    },

    // manually import animations
    animations: ["slideInDown", "slideOutDown", "fadeIn"],
  };
});