Quasar Framework

paul

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.

paul

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

paul

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

paul

@thibautguedou3 thanks Thibaut. Will take a look.

paul

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

paul

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

paul

@pintaf thanks a lot !

paul

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

paul

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…

paul

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

paul

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

paul

@Hawkeye64 What is precisely the problem with global yarn?

paul

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

paul

@Max thanks a lot. Spot on.

paul

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

paul

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.

paul

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

paul

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?

paul

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

paul

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

Posts made by paul