How to set a QList at the bottom of the menu, like the image below?

How I know if the plataform is cordova inside config/index.js?

var path = require('path')

module.exports = {
  // Webpack aliases
  aliases: {
    quasar: path.resolve(__dirname, '../node_modules/quasar-framework/'),
    src: path.resolve(__dirname, '../src'),
    assets: path.resolve(__dirname, '../src/assets'),
    '@': path.resolve(__dirname, '../src/components'),
    variables: path.resolve(__dirname, '../src/themes/quasar.variables.styl'),
    'vuex-store': path.resolve(__dirname, '../src/store'),
    package: path.resolve(__dirname, '../package.json')
  },
  progressFormat: ' [:bar] ' + ':percent'.bold + ' (:msg)',
  defaultTheme: 'mat',

  build: {
    env: require('./prod.env'),
    publicPath: [Platform.is.cordova] ? '' : '/', // ON HERE! I NEED TO KNOW IF THE PLATFORM IS CORDOVA
    productionSourceMap: false,
    purifyCSS: true
  },
  dev: {
    env: require('./dev.env'),
    cssSourceMap: true,
    openBrowser: false,
    publicPath: '/',
    port: 8080,
    proxyTable: {}
  }
}

@danielo515

.babelrc

{
  "presets": [["es2015", {"modules": false}], "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

build/webpack.base.conf.js

var
  path = require('path'),
  webpack = require('webpack'),
  config = require('../config'),
  cssUtils = require('./css-utils'),
  env = require('./env-utils'),
  merge = require('webpack-merge'),
  projectRoot = path.resolve(__dirname, '../'),
  ProgressBarPlugin = require('progress-bar-webpack-plugin'),
  useCssSourceMap =
    (env.dev && config.dev.cssSourceMap) ||
    (env.prod && config.build.productionSourceMap)

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: config[env.prod ? 'build' : 'dev'].publicPath,
    filename: 'js/[name].js',
    chunkFilename: 'js/[id].[chunkhash].js'
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    modules: [
      resolve('src'),
      resolve('node_modules')
    ],
    alias: config.aliases
  },
  module: {
    rules: [
      { // eslint
        enforce: 'pre',
        test: /\.(vue|js)$/,
        loader: 'eslint-loader',
        include: projectRoot,
        exclude: /node_modules/,
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          postcss: cssUtils.postcss,
          loaders: merge({js: 'babel-loader'}, cssUtils.styleLoaders({
            sourceMap: useCssSourceMap,
            extract: env.prod
          }))
        }
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': config[env.prod ? 'build' : 'dev'].env,
      'DEV': env.dev,
      'PROD': env.prod,
      '__THEME': '"' + env.platform.theme + '"'
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: env.prod,
      options: {
        context: path.resolve(__dirname, '../src'),
        postcss: cssUtils.postcss
      }
    }),
    new ProgressBarPlugin({
      format: config.progressFormat
    })
  ],
  performance: {
    hints: false
  }
}

config/index.js

var path = require('path')

module.exports = {
  // Webpack aliases
  aliases: {
    quasar: path.resolve(__dirname, '../node_modules/quasar-framework/'),
    src: path.resolve(__dirname, '../src'),
    assets: path.resolve(__dirname, '../src/assets'),
    '@': path.resolve(__dirname, '../src/components'),
    variables: path.resolve(__dirname, '../src/themes/quasar.variables.styl'),
    'vuex-store': path.resolve(__dirname, '../src/store'),
    package: path.resolve(__dirname, '../package.json')
  },

  // Progress Bar Webpack plugin format
  // https://github.com/clessg/progress-bar-webpack-plugin#options
  progressFormat: ' [:bar] ' + ':percent'.bold + ' (:msg)',

  // Default theme to build with ('ios' or 'mat')
  defaultTheme: 'mat',

  build: {
    env: require('./prod.env'),
    publicPath: '/',
    productionSourceMap: false,

    // Remove unused CSS
    // Disable it if it has side-effects for your specific app
    purifyCSS: true
  },
  dev: {
    env: require('./dev.env'),
    cssSourceMap: true,
    // auto open browser or not
    openBrowser: false,
    publicPath: '/',
    port: 8080,

    // If for example you are using Quasar Play
    // to generate a QR code then on each dev (re)compilation
    // you need to avoid clearing out the console, so set this
    // to "false", otherwise you can set it to "true" to always
    // have only the messages regarding your last (re)compilation.
    clearConsoleOnRebuild: false,

    // Proxy your API if using any.
    // Also see /build/script.dev.js and search for "proxy api requests"
    // https://github.com/chimurai/http-proxy-middleware
    proxyTable: {}
  }
}

/*
 * proxyTable example:
 *
   proxyTable: {
      // proxy all requests starting with /api
      '/api': {
        target: 'https://some.address.com/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
 */

@danielo515 do you have any idea how I can solve this? Could you tell me another compressor that is widely used by the community? Thanks.

@smakinson So far, no error!

Using Lazy Loading:

// sections from /src/router.js
function load (component) {
  // '@' is aliased to src/components
  return () => System.import(`@/${component}.vue`)
}

And:

quasar build

Trigger the following error:

ERROR in js/0.aab963007f1783dc01dc.js from UglifyJs
Unexpected token punc «(», expected punc «:» [js/0.aab963007f1783dc01dc.js:36,13]

ERROR in js/1.7861e04c92edd3414bc7.js from UglifyJs
Unexpected token punc «(», expected punc «:» [js/1.7861e04c92edd3414bc7.js:36,13]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! quasar-app@0.0.1 build: `node build/script.build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the quasar-app@0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\phill\AppData\Roaming\npm-cache\_logs\2017-09-15T22_41_13_964Z-debug.log

However, if I remove the ${…} ,

// sections from /src/router.js
function load (component) {
  // '@' is aliased to src/components
  return () => System.import(`@/foo.vue`)
}

no error is displayed!

$ npm list --depth=0
quasar-app@0.0.1 C:\Users\phill\Desktop\plenario\quasar
+-- autoprefixer@6.7.7
+-- axios@0.16.2
+-- babel-core@6.26.0
+-- babel-eslint@7.2.3
+-- babel-loader@7.1.2
+-- babel-plugin-transform-es2015-shorthand-properties@6.24.1
+-- babel-plugin-transform-runtime@6.23.0
+-- babel-preset-es2015@6.24.1
+-- babel-preset-stage-2@6.24.1
+-- babel-runtime@6.26.0
+-- UNMET PEER DEPENDENCY bulma@>=0.2
+-- colors@1.1.2
+-- connect-history-api-fallback@1.3.0
+-- css-loader@0.28.7
+-- es6-promise@4.1.1
+-- eslint@4.6.1
+-- eslint-config-standard@10.2.1
+-- eslint-friendly-formatter@3.0.0
+-- eslint-loader@1.9.0
+-- eslint-plugin-html@3.2.1
+-- eslint-plugin-import@2.7.0
+-- eslint-plugin-node@5.1.1
+-- eslint-plugin-promise@3.5.0
+-- eslint-plugin-standard@3.0.1
+-- eventsource-polyfill@0.9.6
+-- express@4.15.4
+-- extract-text-webpack-plugin@3.0.0
+-- file-loader@0.11.2
+-- friendly-errors-webpack-plugin@1.6.1
+-- glob@7.1.2
+-- html-webpack-plugin@2.30.1
+-- http-proxy-middleware@0.17.4
+-- json-loader@0.5.7
+-- laravel-echo@1.3.2
+-- less@2.7.2
+-- less-loader@4.0.5
+-- moment@2.18.1
+-- opn@5.1.0
+-- optimize-css-assets-webpack-plugin@3.2.0
+-- postcss-loader@1.3.3
+-- progress-bar-webpack-plugin@1.10.0
+-- purify-css@1.2.6
+-- pusher-js@4.1.0
+-- quasar-extras@0.0.8
+-- quasar-framework@0.14.3
+-- shelljs@0.7.8
+-- stylus@0.54.5
+-- stylus-loader@3.0.1
+-- url-loader@0.5.9
+-- vue@2.3.4
+-- vue-bulma-datepicker@1.3.6
+-- vue-loader@12.2.2
+-- vue-router@2.7.0
+-- vue-select@2.2.0
+-- vue-style-loader@3.0.3
+-- vue-template-compiler@2.3.4
+-- vuex@2.4.0
+-- vuex-persistedstate@2.0.0
+-- vuex-router-sync@4.3.1
+-- webpack@3.6.0
+-- webpack-dev-middleware@1.12.0
+-- webpack-hot-middleware@2.19.1
`-- webpack-merge@4.1.0

npm ERR! peer dep missing: bulma@>=0.2, required by vue-bulma-datepicker@1.3.6

$ npm list --depth=0 -g
C:\Users\phill\AppData\Roaming\npm
+-- bower@1.8.0
+-- cordova@7.0.1
+-- electron@1.4.15
+-- grunt-cli@1.2.0
+-- gulp@3.9.1
+-- UNMET PEER DEPENDENCY less@^2.3.1
+-- less-loader@4.0.5
+-- npm@5.3.0
+-- quasar-cli@0.6.4
+-- vue-cli@2.8.1
+-- vue-router@2.2.1
+-- vuex@2.1.2
`-- UNMET PEER DEPENDENCY webpack@^2.0.0 || ^3.0.0

npm ERR! peer dep missing: less@^2.3.1, required by less-loader@4.0.5
npm ERR! peer dep missing: webpack@^2.0.0 || ^3.0.0, required by less-loader@4.0.5
npm ERR! invalid: node-gyp@3.4.0 C:\Users\phill\AppData\Roaming\npm\node_modules\cordova\node_modules\npm\node_modules\node-gyp
npm ERR! missing: path-array@^1.0.0, required by node-gyp@3.4.0

// VueRouter "history" mode DOESN'T works for Cordova builds, it is only to be used only for websites.
// If you decide to go with "history" mode, please also open /config/index.js and set "build.publicPath" to something other than an empty string. (Example: '/' instead of current '')
// If switching back to default "hash" mode, don\'t forget to set the build publicPath back to '' so Cordova builds work again.

So, is need change the /config/index.js file too. How get Platform.is.cordova value inside this file?