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. paul
    3. Posts
    P
    • Profile
    • Following 0
    • Followers 0
    • Topics 35
    • Posts 99
    • Best 11
    • Groups 0

    Posts made by paul

    • Full screen menu overlay by means of q-drawer

      Would it be possible to get the same effect as here:
      https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay
      with the q-drawer component?
      I mean, I can copy that that, but i want to use as much as possible of the quasar goodness.

      Thanks
      paul.

      posted in Framework
      P
      paul
    • RE: How to vertically centering a single line or component? (SOLVED!)

      @a47ae Very nice, the variable $top-bar-height is that something that is available automatically?

      posted in Help
      P
      paul
    • RE: Is support for storybook for a quasar-cli app possible?

      @thibautguedou3 This is working great, thanks again.
      I’m using ES6 instead of typescript.
      This is the webpack config for ES6:

      const path = require('path')
      
      module.exports = ({ config }) => {
        config.module.rules.push({
          test: /\.(scss|sass)$/,
          use: ['style-loader', 'css-loader', 'sass-loader'],
          include: path.resolve(__dirname, '../')
        })
        config.module.rules.push({
          test: /\.stories\.jsx?$/,
          loaders: [require.resolve('@storybook/source-loader')],
          enforce: 'pre'
        })
      
        return config
      }
      posted in Framework
      P
      paul
    • RE: Is support for storybook for a quasar-cli app possible?

      @thibautguedou3 thanks Thibaut. Will take a look.

      posted in Framework
      P
      paul
    • RE: Quasar build fails when project is created on windows machine - check in source control -opened on linux

      Everyone using docker will run into this problem when the original sources are created on Windows.

      posted in Framework
      P
      paul
    • Quasar build fails when project is created on windows machine - check in source control -opened on linux

      I’m using the very latest bits.
      When I create a quasar project (quasar -cli based) on my windows machine. Quasar build: OK.
      when I check in the sources, and load them on a linux machine (same quasar cli), quasar build gives following error.

      Module not found: Error: Can't resolve 'pages/Index.vue' in '/home/paul/tfs-kuub/MyProject/src/router'
       @ ./src/router/routes.js 13:13-38
       @ ./src/router/index.js
       @ ./.quasar/app.js
       @ ./.quasar/client-entry.js
       @ multi ./.quasar/client-entry.js
      
      
       app:build [FAIL] Build failed with errors. Check log above. +0ms
      

      When I create the project directly on the linux box: quasar build: OK.

      Black magic 🙂

      posted in Framework
      P
      paul
    • RE: Is there a way to set the size of the Q-toggle

      @pintaf thanks a lot !

      posted in Framework
      P
      paul
    • RE: Is support for storybook for a quasar-cli app possible?

      @s-molinari Thanks for the help. Indeed, that’s theoretical. Just like adding typescript to a quasar app boils down to ‘npm install typescript’, just theoretical 🙂
      I think there is more involved than that.
      But thanks a lot for getting the right persons involved to put it on the shortlist for adding it to the brilliant quasar testing support. thanks @digiproduct for your support.
      cheers.

      posted in Framework
      P
      paul
    • Is support for storybook for a quasar-cli app possible?

      https://storybook.js.org/docs/guides/guide-vue/

      For a vue-cli app following plugin works like a charm:
      https://github.com/storybooks/vue-cli-plugin-storybook

      Unfortunately, I’m using quasar-cli…

      posted in Framework
      P
      paul
    • V-touch repeat not working since upgrade to Beta 13

      I upgraded to beta 13 and buttons using v-touch repeat aren’t working any longer.
      Is there something I need to upgrade?

      posted in Framework
      P
      paul
    • RE: @quasar/typescript preview Available

      @nothingismagick .
      Thanks for this. Great work.
      A lot of new things in this area when Vue v3 arrives.

      posted in [v1] App Extensions
      P
      paul
    • RE: sharing my docker 2 stage build for production with yarn.

      @Hawkeye64 What is precisely the problem with global yarn?

      posted in Framework
      P
      paul
    • sharing my docker 2 stage build for production with yarn.

      For quasar pre-V1, I was using an approach with docker to publish my apps.
      for V1, this approach gave some issues. Maybe useful for other devs, so here is my new docker file:

      # Build stage
      FROM node:8 AS buildenv
      
      ENV YARN_VERSION 1.13.0
      
      RUN curl -fSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz" \
          && tar -xzf yarn-v$YARN_VERSION.tar.gz -C /opt/ \
          && ln -snf /opt/yarn-v$YARN_VERSION/bin/yarn /usr/local/bin/yarn \
          && ln -snf /opt/yarn-v$YARN_VERSION/bin/yarnpkg /usr/local/bin/yarnpkg \
          && rm yarn-v$YARN_VERSION.tar.gz
      
      WORKDIR /generator
      ENV projectName "my-project"
      COPY ./${projectName}/package.json .
      COPY ./${projectName}/yarn.lock .
      RUN yarn
      COPY ./${projectName} .
      RUN node node_modules/@quasar/app/bin/quasar-build
      # Runtime stage
      FROM nginx
      ENV projectName "my-project"
      COPY --from=buildenv /generator/dist/spa /usr/share/nginx/html
      # COPY ./${projectName}/default.conf /etc/nginx/conf.d/default.conf --> in case you want nginx specific conf
      
      EXPOSE 80
      
      

      Some remarks:

      • I run into something very strange when i used npm (with quasar V1) on docker: npm didn’t pick up the latest quasar node_modules. So, that’s why i moved to yarn in the docker file.
      • the docker file explicitely installs a version of yarn specified in the docker file.
      • I needed to downgrade to node:8
      • No need to install @quasar/cli in the docker container !

      Please provide feedback in case you see potential improvements.
      cheers

      posted in Framework
      P
      paul
    • RE: From where is the ~ alias coming?

      @Max thanks a lot. Spot on.

      posted in Framework
      P
      paul
    • RE: Why is there no jsconfig.json in the project root?

      Seems to be working fine in vscode.
      Just interested in other settings that could bring additional comfort.

      posted in Framework
      P
      paul
    • From where is the ~ alias coming?

      I saw somewhere (i think in the quasar-testing project), that you can use the ~ alias to refer to the root of the project?
      Is this a standard vueJs thing, or is quasar adding this?
      Just tyring to understand.

      posted in Framework
      P
      paul
    • Why is there no jsconfig.json in the project root?

      Just wondering if the standard setup of a quasar cli project couldn’t benefit from a jsconfig.json?
      When that file contains:
      {
      “compilerOptions”: {
      “checkJs”: true
      }
      }
      you get free type checking, as explained in https://blog.usejournal.com/type-vue-without-typescript-b2b49210f0b

      posted in Framework
      P
      paul
    • [V1] Checkbox with checked/unchecked icon

      Until V 0.17 is was possible to specify e.g. checked-icon=“lock”
      unchecked-icon=“lock_open” inside a checkbox.
      By doing so the default visualization of the checkbox was replaced by the 2 icons.

      What’s the way to go in V1 to accomplish this?

      posted in Framework
      P
      paul
    • RE: Extending the QSlider with an up and down button.

      ok, answered my own question : https://codepen.io/paulbladel/pen/KJYPwG
      the trick is to use the sync modifier.

      posted in Help
      P
      paul
    • Extending the QSlider with an up and down button.

      I’m trying to extend the QSlider with an up and down button.
      So, let’s call this new component: btn-slider.
      This new component has following markup:

      <div>
            <q-btn 
              @click="down()" 
              size="md" 
              round 
              icon="remove">
            </q-btn>
          <q-slider ref='slider'
          v-bind="$attrs" v-on="$listeners"
          />
          <q-btn 
            @click="up()" 
            size="md" 
            :disable='disable()' 
            round 
            icon="add">
          </q-btn>
        </div>
      

      As you can see, I bind all props/events to the QSlider:

      <q-slider ref='slider'
          v-bind="$attrs" v-on="$listeners"
          />
      

      By doing so, all props are passed directly to the QSlider:

      <div id="q-app">
        <div class="q-pa-md">
            <q-badge color="secondary">
              Model: {{ value }}
            </q-badge>
        
            <btn-slider
              v-model="value"
              :min="0"
              :max="20"
              :step="1"
              label label-always
              color="light-green"
            ></btn-slider>
          </div>
      </div>
      

      Now, the problem is that I can’t find a decent way to update the value of the QSlider when the up down button is triggered.

      Please find here a codepen: https://codepen.io/paulbladel/pen/KJYPwG

      posted in Help
      P
      paul