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. cristiano.moraes
    • Profile
    • Following 0
    • Followers 0
    • Topics 4
    • Posts 12
    • Best 1
    • Groups 0

    cristiano.moraes

    @cristiano.moraes

    1
    Reputation
    1
    Profile views
    12
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    cristiano.moraes Follow

    Best posts made by cristiano.moraes

    • RE: tabs Arrows not displaying

      Hello @jeimz173. Have you found a solution to this problem? I am facing the same issue and the above solutions didn’t solve it.

      posted in Help
      cristiano.moraes
      cristiano.moraes

    Latest posts made by cristiano.moraes

    • RE: Quasar Upgrade is failing due to npm server error on MAC

      Thank you for your answer @dobbel. I did what you suggested and it is working now.

      posted in Help
      cristiano.moraes
      cristiano.moraes
    • RE: Quasar-cli installed using Yarn failing to upgrade

      Hi @metalsadman. Thank you for your answer, I finally have this working.
      For the record, what I did was uninstalling everything (node/nvm/yarn) and respective caches and reinstalled everything again. But at this time I started by the nvm as suggested and swapped to node v12. I also, following another tip, installed quasar-cli using npm, once was said it is recommended using this for global packages.

      posted in Help
      cristiano.moraes
      cristiano.moraes
    • Quasar-cli installed using Yarn failing to upgrade

      This error is similar to the error mentioned here: https://forum.quasar-framework.org/topic/5063/quasar-upgrade-is-failing-due-to-npm-server-error-on-mac . However, I installed quasar-cli using Yarn and the solution found in the topic is not working for me. Also, quasar info is oddly saying that NPM and Yarn are not installed.
      I am using Kubuntu 20.10

      cristiano@cristiano-note:~/workspace/teste-blah$ quasar upgrade
      
        Quasar CLI · Gathering information with yarn...
      
       @quasar/extras: 1.9.12 → Skipping!
         (⚠️  NPM server returned an error, so we cannot detect latest version)
       quasar: 1.14.7 → Skipping!
         (⚠️  NPM server returned an error, so we cannot detect latest version)
       @quasar/app: 2.1.13 → Skipping!
         (⚠️  NPM server returned an error, so we cannot detect latest version)
        Congrats! All Quasar packages are up to date.
      
      cristiano@cristiano-note:~/workspace/teste-blah$ quasar info
      
      Operating System - Linux(5.8.0-33-generic) - linux/x64
      NodeJs - 14.15.3
      
      Global packages
        NPM - 
        yarn - Not installed
        @quasar/cli - 1.1.3
        @quasar/icongenie - Not installed
        cordova - Not installed
      
      Important local packages
        quasar - 1.14.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
        @quasar/app - 2.1.13 -- Quasar Framework local CLI
        @quasar/extras - 1.9.12 -- Quasar Framework fonts, icons and animations
        eslint-plugin-quasar - Not installed
        vue - 2.6.12 -- Reactive, component-oriented view layer for modern web interfaces.
        vue-router - 3.2.0 -- Official router for Vue.js 2
        vuex - 3.6.0 -- state management for Vue.js
        electron - Not installed
        electron-packager - Not installed
        electron-builder - Not installed
        @babel/core - 7.12.10 -- Babel compiler core.
        webpack - 4.44.2 -- 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.11.0 -- Serves a webpack app. Updates the browser on changes.
        workbox-webpack-plugin - Not installed
        register-service-worker - 1.7.1 -- Script for registering service worker, with hooks
        typescript - 3.9.5 -- TypeScript is a language for application scale JavaScript development
        @capacitor/core - Not installed
        @capacitor/cli - Not installed
        @capacitor/android - Not installed
        @capacitor/ios - Not installed
      
      cristiano@cristiano-note:~/workspace/teste-blah$ yarn --version
      1.22.10
      cristiano@cristiano-note:~/workspace/teste-blah$ npm --version
      6.14.9
      cristiano@cristiano-note:~/workspace/teste-blah$ node --version
      v14.15.3
      

      My package.json:

      {
        "name": "teste-blah",
        "version": "0.0.1",
        "description": "A Quasar Framework app",
        "productName": "Quasar App",
        "author": "Cristiano <cristiano.moraes@gmail.com>",
        "private": true,
        "scripts": {
          "lint": "eslint --ext .js,.vue ./",
          "test": "echo \"No test specified\" && exit 0"
        },
        "dependencies": {
          "@quasar/extras": "^1.0.0",
          "core-js": "^3.6.5",
          "quasar": "^1.0.0"
        },
        "devDependencies": {
          "@quasar/app": "^2.0.0",
          "babel-eslint": "^10.0.1",
          "eslint": "^6.8.0",
          "eslint-config-standard": "^14.1.0",
          "eslint-loader": "^3.0.3",
          "eslint-plugin-import": "^2.14.0",
          "eslint-plugin-node": "^11.0.0",
          "eslint-plugin-promise": "^4.0.1",
          "eslint-plugin-standard": "^4.0.0",
          "eslint-plugin-vue": "^6.1.2"
        },
        "browserslist": [
          "last 10 Chrome versions",
          "last 10 Firefox versions",
          "last 4 Edge versions",
          "last 7 Safari versions",
          "last 8 Android versions",
          "last 8 ChromeAndroid versions",
          "last 8 FirefoxAndroid versions",
          "last 10 iOS versions",
          "last 5 Opera versions"
        ],
        "engines": {
          "node": ">= 10.18.1",
          "npm": ">= 6.13.4",
          "yarn": ">= 1.21.1"
        }
      }
      

      I tried to reinstall everything, create a new project, delete all node_modules folders. Nothing seems to work. I am running out of ideas. Any suggestions?

      Thanks
      Cristiano

      posted in Help
      cristiano.moraes
      cristiano.moraes
    • RE: Quasar Upgrade is failing due to npm server error on MAC

      I am getting the same problem reported here but I used Yarn instead, to install Quasar. Removing yarn.lock file and install yarn again make no difference. Any ideas?

      posted in Help
      cristiano.moraes
      cristiano.moraes
    • RE: Can not access process.env properties dynamically

      Hi @qyloxe, thank you for your answer.

      Unfortunately, adding JSON.stringify, make no difference to solve this issue. process.env[key] still returns undefined, for the reason Metalsadman explained I guess.

      About the URL, it has no space. The problem is that $envHelper(‘STATIC_IMAGES_URL’) + ‘/my_logo.png generates “<my_domain>/undefined/my_logo.png”

      Cheers

      posted in Framework
      cristiano.moraes
      cristiano.moraes
    • RE: Can not access process.env properties dynamically

      Hi @metalsadman. Thank you for answer my question.

      Now I understand this witchcraft. 🙂 But still, there is something that bugs me. Because this used to work before.

      I use a “helper” to access env variables as shown here https://medium.com/carbono/using-env-file-in-quasar-apps-72b56909302f

      it is a simple plugin:
      ‘’’
      module.exports = function (key, fallback) {
      return process.env[key] || fallback
      }
      ‘’’

      So I could have in my template something like:
      ‘’’
      <img class=“logo” :src="$envHelper(‘STATIC_IMAGES_URL’) + ‘/my_logo.png’" />
      ‘’’

      It doesn’t work anymore, but it was working until my last update. Maybe some change in Webpack ?

      I guess my best option now is to use mixin, but it kind of kill, at least for me, all point of using process.env.

      Oh well. Thank you anyway.

      posted in Framework
      cristiano.moraes
      cristiano.moraes
    • Can not access process.env properties dynamically

      I can’t understand how this can happen but process.env properties can only be accessed statically, not dynamically.

      So I created a dummy project and set env property in quasar.config.js like this:

      ...
       build: {
            vueRouterMode: 'hash', // available values: 'hash', 'history'
      
            env: {
              VUE_APP_TEST: "THIS IS A TEST",
            },
      
            extendWebpack (cfg) {
              cfg.module.rules.push({
                enforce: 'pre',
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                exclude: /node_modules/
              })
            },
          }
      ...
      

      Then I created this simple page:

      <template>
        <q-page class="flex flex-center">
            <ul>
            <li>{{ msg1 }}</li>
            <li>{{ msg2 }}</li>
            </ul>
        </q-page>
      </template>
      
      <script>
      export default {
        name: 'PageIndex',
        data: function () {
          return {
            msg1: "",
            msg2: ""
          }
        },
        mounted() {
          this.msg1 = process.env.VUE_APP_TEST;
          console.log(this.msg1)
      
          let key = "VUE_APP_TEST";
          this.msg2 = process.env[key];
          console.log(this.msg2); // show undefined
        }
      }
      </script>
      

      So this.msg1 show correctly THIS IS A TEST but this.msg2 show nothing and console.log return undefined.

      6923d96e-8eb1-4f5b-8c87-f7e413f99991-image.png

      My questions are :

      1. There is a way for me to access process.env properties dynamically?
      2. How only dynamic access can be restricted in an object property?

      Thanks!

      posted in Framework
      cristiano.moraes
      cristiano.moraes
    • RE: No arrows in q-tab in mobile device

      This solution assumes that always will have a tip indicating that exists more tabs. But it is not always the case. There is already a feature request created to address this issue: https://github.com/quasarframework/quasar/issues/4019

      posted in Framework
      cristiano.moraes
      cristiano.moraes
    • RE: tabs Arrows not displaying

      Hello @jeimz173. Have you found a solution to this problem? I am facing the same issue and the above solutions didn’t solve it.

      posted in Help
      cristiano.moraes
      cristiano.moraes
    • Horizontal Q-Card ?

      I’d like to have a card with the image on the left and the action links and the text on the right. Is it possible using Q-Card? If not what would be the best approach to do it? Follows a draft of what I am looking for:

      f10336e9-41a5-4d09-a854-02f2aa56fe88-image.png

      posted in Framework
      cristiano.moraes
      cristiano.moraes