No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. chankl78
    C
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 15
    • Best 1
    • Groups 0

    chankl78

    @chankl78

    1
    Reputation
    61
    Profile views
    15
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    chankl78 Follow

    Best posts made by chankl78

    • RE: Laravel + Quasar 1.0 with Quasar CLI

      @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

      posted in Starter Kits
      C
      chankl78

    Latest posts made by chankl78

    • RE: this.$axios in action

      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
      }
      
      
      posted in Framework
      C
      chankl78
    • RE: [v1] What is the difference between using cli "quasar b" and "quasar d"

      It is not working for me. …

      posted in CLI
      C
      chankl78
    • RE: [v1] What is the difference between using cli "quasar b" and "quasar d"

      Will do… I will try agin. Thanks.

      posted in CLI
      C
      chankl78
    • RE: [v1] What is the difference between using cli "quasar b" and "quasar d"

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

      Thanks.

      posted in CLI
      C
      chankl78
    • RE: [v1] What is the difference between using cli "quasar b" and "quasar d"

      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'
            }
          }
        }
      }
      
      posted in CLI
      C
      chankl78
    • [v1] What is the difference between using cli "quasar b" and "quasar d"

      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.

      posted in CLI
      C
      chankl78
    • RE: Laravel + Quasar 1.0 with Quasar CLI

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

      My Humble Dockerfile

      posted in Starter Kits
      C
      chankl78
    • RE: http://quasar.dev errors

      Thanks for your help.

      posted in Hangout
      C
      chankl78
    • RE: http://quasar.dev errors

      @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.

      posted in Hangout
      C
      chankl78
    • RE: http://quasar.dev errors

      Is there anyway to resolve this problem?

      posted in Hangout
      C
      chankl78