Quasar CLI：设置配置文件 quasar.conf.js

Question

I am new to Laravel and Quasar and I have been trying to integrate.

I have the backend part ready just for some simple testing.

My frontend is ready as well.

The only problem I am having is with the configuration file of quasar.

I tried to set it the same way as this project: https://github.com/yyx990803/laravel-vue-cli-3

But, the api doesn't get the data.

This is my configuration code.

quasar.conf.js

module.exports = function(/* ctx */) {
  return {
    supportTS: false,

    boot: ["i18n", "axios"],

    css: ["app.sass"],

    extras: ["roboto-font", "material-icons"],

    build: {
      vueRouterMode: "history",

      extendWebpack(cfg) {
        cfg.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /node_modules/
        });
      }
    },

    devServer: {
      https: false,
      port: 8080,
      open: true,
      proxy: {
        
        "/api": {
          target: "http:
          changeOrigin: true,
          pathRewrite: {
            "^/api": ""
          }
        }
      } 
    },

    framework: {
      iconSet: "material-icons",
      lang: "en-us",
      config: {},

      importStrategy: "auto",

      plugins: []
    },

    animations: [],

    ssr: {
      pwa: false
    },

    pwa: {
      workboxPluginMode: "GenerateSW",
      workboxOptions: {},
      manifest: {
        name: `Quasar App`,
        short_name: `Quasar App`,
        description: `A Quasar Framework app`,
        display: "standalone",
        orientation: "portrait",
        background_color: "#ffffff",
        theme_color: "#027be3",
        icons: [
          {
            src: "icons/icon-128x128.png",
            sizes: "128x128",
            type: "image/png"
          },
          {
            src: "icons/icon-192x192.png",
            sizes: "192x192",
            type: "image/png"
          },
          {
            src: "icons/icon-256x256.png",
            sizes: "256x256",
            type: "image/png"
          },
          {
            src: "icons/icon-384x384.png",
            sizes: "384x384",
            type: "image/png"
          },
          {
            src: "icons/icon-512x512.png",
            sizes: "512x512",
            type: "image/png"
          }
        ]
      }
    },

    cordova: {},

    capacitor: {
      hideSplashscreen: true
    },

    electron: {
      bundler: "packager",

      packager: {},

      builder: {
        appId: "frontend"
      },

      nodeIntegration: true,

      extendWebpack(/* cfg */) {}
    }
  };
};

Answer 1

Here's a guide on how to setup Quasar + Laravel to get a working PWA with API endpoint on mydomain.com/api

https://dreamonkey.com/en/blog/how-to-setup-a-pwa-with-quasar-and-laravel/

Check if it can be useful for your use case. It expects you to be working with Homestead in your local machine and managing authentication with Laravel Sanctum.

This snippet in particular:

module.exports = configure(function(ctx) {
  return {
    // Other configure options
    // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
    devServer: {
      https: false,
      port: 8080,
      open: true, // opens browser window automatically
      proxy: [
        {
          context: ['/sanctum', '/login', '/password', '/logout', '/api'],
          target: 'http://192.168.10.10', // Laravel Homestead end-point
          // avoid problems with session and XSRF cookies
          // When using capacitor, use the IP of the dev server streaming the app
          // For SPA and PWA use localhost, given that the app is streamed on that host
          // xxx address is the IP address chosen by Quasar to stream the app
          cookieDomainRewrite:
            ctx.modeName === 'capacitor' ? 'xxx.xxx.xxx.xxx' : 'localhost'
        }
      ]
    },
  }
});

If it doesn't work, you may have some errors in the code making the async requests