No More Posting New Topics!

chankl78

@syflex said in Laravel + Quasar 1.0 with Quasar CLI:

You already have everything you need.

Use laravel as a back-end api and quasar as front-end. And you can deploy spa, pwa, mobile(android,iOS, many more ), windows app and what ever you can think of.

I can show you how to, if you want extra direction.

I am interested to know how. Thanks

Smile
chankl78

chankl78

I am also facing the issue. But I have try the following steps, I still not able to resolve it.

/var/www/html/src-spa # quasar info

Operating System - Linux(4.9.184-linuxkit) - linux/x64
NodeJs - 10.16.0

Global packages
  NPM - 6.9.0
  yarn - 1.16.0
  @quasar/cli - 1.0.0
  cordova - Not installed

Important local packages
  quasar - 1.0.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 1.0.4 -- Quasar Framework local CLI
  @quasar/extras - 1.2.0 -- Quasar Framework fonts, icons and animations
  vue - 2.6.10 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.0.7 -- Official router for Vue.js 2
  vuex - 3.1.1 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.5.5 -- Babel compiler core.
  webpack - 4.35.3 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.7.2 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.6.2 -- Script for registering service worker, with hooks

Quasar App Extensions
  *None installed*

Networking
  Host - bb995cc2b4a5
  eth0 - 172.17.0.4

/var/www/html/src-spa #

Below is my quasar.conf.js

module.exports = function (ctx) {
  return {
    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    boot: [
      'i18n',
      'axios'
    ],

    css: [
      'app.styl'
    ],

    extras: [
      // 'ionicons-v4',
      'mdi-v3'
    ],

    framework: {
      // iconSet: 'ionicons-v4',
      // lang: 'de', // Quasar language

      // all: true, // --- includes everything; for dev only!

      cssAddon: true,

      components: [
        'QLayout',
        'QHeader',
        'QDrawer',
        'QPageContainer',
        'QPage',
        'QToolbar',
        'QToolbarTitle',
        'QBtn',
        'QIcon',
        'QList',
        'QItem',
        'QItemSection',
        'QItemLabel',
        'QForm',
        'QInput',
        'QBanner',
        'QDialog',
        'QAvatar'
      ],

      directives: [
        'Ripple',
        'ClosePopup'
      ],

      // Quasar plugins
      plugins: [
        'Notify'
      ]
    },

    supportIE: false,

    build: {
      distDir: '../public/',
      scopeHoisting: true,
      vueRouterMode: 'history',
      // vueCompiler: true,
      // gzip: true,
      // analyze: true,
      // extractCSS: false,
      extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/,
          options: {
            formatter: require('eslint').CLIEngine.getFormatter('stylish')
          }
        })
      },
      env: {
        api: JSON.stringify(
          ctx.dev
            ? 'http://localhost/api' // local dev env
            : 'http://prod.tld/api' // production end-point
        )
      }
    },

    devServer: {
      https: false,
      port: 8880,
      open: false, // opens browser window automatically
      proxy: { '/api': { target: 'http://localhost' } }
    },

    // animations: 'all', // --- includes all animations
    animations: [],

    ssr: {
      pwa: false
    },

    pwa: {
      // workboxPluginMode: 'InjectManifest',
      // workboxOptions: {}, // only for NON InjectManifest
      manifest: {
        name: 'SSASoft Backoffice',
        short_name: 'SSASoft App',
        description: 'SSASoft Backoffice for Singapore Soka Association',
        display: 'standalone',
        orientation: 'portrait',
        background_color: '#ffffff',
        theme_color: '#027be3',
        icons: [
          {
            'src': 'statics/icons/icon-128x128.png',
            'sizes': '128x128',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-192x192.png',
            'sizes': '192x192',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-256x256.png',
            'sizes': '256x256',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-384x384.png',
            'sizes': '384x384',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-512x512.png',
            'sizes': '512x512',
            'type': 'image/png'
          }
        ]
      }
    },

    cordova: {
      // id: 'org.cordova.quasar.app',
      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
    },

    electron: {
      // bundler: 'builder', // or 'packager'

      extendWebpack (cfg) {
        // do something with Electron main process Webpack cfg
        // chainWebpack also available besides this extendWebpack
      },

      packager: {
        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options

        // OS X / Mac App Store
        // appBundleId: '',
        // appCategoryType: '',
        // osxSign: '',
        // protocol: 'myapp://path',

        // Windows only
        // win32metadata: { ... }
      },

      builder: {
        // https://www.electron.build/configuration/configuration

        // appId: 'src-spa'
      }
    }
  }
}

Below is my axios.js

import axios from 'axios'

export default async ({ Vue }) => {
  Vue.prototype.$axios = axios
}

chankl78

It is not working for me. …

chankl78

Will do… I will try agin. Thanks.

chankl78

Anyone can help me to check with the above is ok?

Thanks.

chankl78

Apologies. Did not post the info.

/var/www/html/src-spa # quasar info

Operating System - Linux(4.9.184-linuxkit) - linux/x64
NodeJs - 10.16.0

Global packages
  NPM - 6.9.0
  yarn - 1.16.0
  @quasar/cli - 1.0.0
  cordova - Not installed

Important local packages
  quasar - 1.0.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 1.0.4 -- Quasar Framework local CLI
  @quasar/extras - 1.2.0 -- Quasar Framework fonts, icons and animations
  vue - 2.6.10 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.0.7 -- Official router for Vue.js 2
  vuex - 3.1.1 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.5.5 -- Babel compiler core.
  webpack - 4.35.3 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.7.2 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.6.2 -- Script for registering service worker, with hooks

Quasar App Extensions
  *None installed*

Networking
  Host - 6ae11cba94bc
  eth0 - 172.17.0.5

/var/www/html/src-spa #

Here is my quasar.config.js

// Configuration for your app
// https://quasar.dev/quasar-cli/quasar-conf-js

module.exports = function (ctx) {
  return {
    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    boot: [
      'i18n',
      'axios'
    ],

    css: [
      'app.styl'
    ],

    extras: [
      'material-icons',
      'material-icons-outlined',
      'material-icons-round',
      'material-icons-sharp',
      'mdi-v3',
      'ionicons-v4',
      'eva-icons',
      'fontawesome-v5',
      'themify'
    ],

    framework: {
      // iconSet: 'ionicons-v4',
      // lang: 'de', // Quasar language

      // all: true, // --- includes everything; for dev only!

      components: [
        'QLayout',
        'QHeader',
        'QFooter',
        'QDrawer',
        'QPageContainer',
        'QPage',
        'QToolbar',
        'QToolbarTitle',
        'QBtn',
        'QIcon',
        'QList',
        'QItem',
        'QItemSection',
        'QItemLabel',
        'QForm',
        'QInput',
        'QBanner',
        'QAvatar'
      ],

      directives: [
        'Ripple'
      ],

      // Quasar plugins
      plugins: [
        'Notify'
      ],

      cssAddon: true
    },

    supportIE: true,

    build: {
      distDir: '../public',
      // htmlFilename: 'index.html',
      scopeHoisting: true,
      vueRouterMode: 'history',
      // vueCompiler: true,
      // gzip: true,
      // analyze: true,
      // extractCSS: false,
      extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/,
          options: {
            formatter: require('eslint').CLIEngine.getFormatter('stylish')
          }
        })
      },
      env: {
        api: JSON.stringify(
          ctx.dev
            ? 'http://localhost/api' // local dev env
            : 'http://prod.tld/api' // production end-point
        )
      }
    },

    devServer: {
      https: false,
      port: 8881,
      open: false, // opens browser window automatically
      proxy: {
        '/api': { target: 'http://127.0.0.1:8881' }
      }
    },

    // animations: 'all', // --- includes all animations
    animations: [],

    ssr: {
      pwa: false
    },

    pwa: {
      // workboxPluginMode: 'InjectManifest',
      // workboxOptions: {}, // only for NON InjectManifest
      manifest: {
        name: 'SSASoft Backoffice',
        short_name: 'SSASoft App',
        description: 'SSASoft Backoffice for Singapore Soka Association',
        display: 'standalone',
        orientation: 'portrait',
        background_color: '#ffffff',
        theme_color: '#027be3',
        icons: [
          {
            'src': 'statics/icons/icon-128x128.png',
            'sizes': '128x128',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-192x192.png',
            'sizes': '192x192',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-256x256.png',
            'sizes': '256x256',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-384x384.png',
            'sizes': '384x384',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-512x512.png',
            'sizes': '512x512',
            'type': 'image/png'
          }
        ]
      }
    },

    cordova: {
      // id: 'org.cordova.quasar.app',
      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
    },

    electron: {
      // bundler: 'builder', // or 'packager'

      extendWebpack (cfg) {
        // do something with Electron main process Webpack cfg
        // chainWebpack also available besides this extendWebpack
      },

      packager: {
        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options

        // OS X / Mac App Store
        // appBundleId: '',
        // appCategoryType: '',
        // osxSign: '',
        // protocol: 'myapp://path',

        // Windows only
        // win32metadata: { ... }
      },

      builder: {
        // https://www.electron.build/configuration/configuration

        // appId: 'src-spa'
      }
    }
  }
}

chankl78

Can I know what is the difference between quasar b and quasar d?

I been trying to do layout changes using my Macbook Pro and using “quasar d”, the changes which I made in the layout will not get reflected immediately …

Example as below

From

<q-btn label="Submit" type="submit" color="primary"></q-btn>

I change to as below

<q-btn label="Submit" type="submit" color="primary" class="full-width q-mt-md"></q-btn>

The above changes will not be reflected until I use quasar b in order for me to see the above changes.

Is there something which I have done wrongly? Pls advice.

Thanks.

chankl78

Finally, I able to create a workable dockerfile for development machine. Took quite a long time.

My Humble Dockerfile

chankl78

Thanks for your help.

chankl78

@chankl78 said in http://quasar.dev errors:

Is there anyway to resolve this problem?

I have resolve it. Thanks for your help.

.dev TLD resolves to 127.0.0.1

I solve it via the above link.

chankl78

Is there anyway to resolve this problem?

No More Posting New Topics!

chankl78

@chankl78

Best posts made by chankl78

Latest posts made by chankl78