Category: Quasar

Quasar

Developing Vue Apps with the Quasar Library — Avatars

Post author By John Au-Yeung
Post date November 21, 2020
No Comments on Developing Vue Apps with the Quasar Library — Avatars

Quasar is a popular Vue UI library for developing good looking Vue apps.

In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.

Avatar

We can add avatars into our Vue app with the provided avatar components.

For example, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-avatar color="red" text-color="white" icon="directions" />
      </q-layout>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

to add the avatar,.

color sets the background color. text-color sets the text color.

icon sets the icon name.

We can also add an image as the avatar:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-avatar>
          <img
            src="https://i.picsum.photos/id/23/200/200.jpg?hmac=IMR2f77CBqpauCb5W6kGzhwbKatX_r9IvgWj6n7FQ7c"
          />
        </q-avatar>
      </q-layout>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

Also, we can change the size with the size prop:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-avatar
          size="100px"
          font-size="52px"
          color="green"
          text-color="white"
          icon="directions"
        />
      </q-layout>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We can make is square with the square prop:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-avatar
          square
          size="100px"
          font-size="52px"
          color="green"
          text-color="white"
          icon="directions"
        />
      </q-layout>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We can make corners rounded with the rounded prop:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-avatar
          rounded
          size="100px"
          font-size="52px"
          color="green"
          text-color="white"
          icon="directions"
        />
      </q-layout>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

Avatars can be added into chips:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-chip>
          <q-avatar color="red" text-color="white">100</q-avatar>
          Emails
        </q-chip>
      </q-layout>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

They can also be added into buttons:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-btn round>
          <q-avatar size="28px">
            <img
              src="https://i.picsum.photos/id/23/200/200.jpg?hmac=IMR2f77CBqpauCb5W6kGzhwbKatX_r9IvgWj6n7FQ7c"
            />
          </q-avatar>
        </q-btn>
      </q-layout>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

Conclusion

We can add avatars into our Vue app with the Quasar library.

Quasar

Developing Vue Apps with the Quasar Library — Page and Progress Bar

Post author By John Au-Yeung
Post date November 21, 2020
No Comments on Developing Vue Apps with the Quasar Library — Page and Progress Bar

short-coated white and beige puppy on the floor

Quasar is a popular Vue UI library for developing good looking Vue apps.

In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.

Page Scroller

We can add a scrollable page component with the q-page-container component.

For example, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 400px;"
        class="shadow-2 rounded-borders"
      >
        <q-header elevated>
          <q-toolbar>
            <q-avatar>
              <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg" />
            </q-avatar>
            <q-toolbar-title>
              App
            </q-toolbar-title>
          </q-toolbar>
        </q-header>

        <q-page-container>
          <q-page padding>
            <p v-for="n in 15" :key="n">
              Lorem ipsum
            </p>

            <q-page-scroller
              position="bottom-right"
              :scroll-offset="150"
              :offset="[18, 18]"
            >
              <q-btn fab icon="keyboard_arrow_up" color="accent" />
            </q-page-scroller>
          </q-page>
        </q-page-container>
      </q-layout>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data: {
          drawerLeft: true
        },
        methods: {}
      });
    </script>
  </body>
</html>

We have the q-layout component that’s used as the layout container.

The q-header component adds a header.

q-toolbar adds a toolbar.

q-page-container has the page container. q-page holds the page content.

q-page-scroller watches the scroll position and shows the q-btn is we scrolled to the bottom of the page.

The position is the position of the scroller component.

Also, we can add q-page-scroller to the top with position set to top :

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 400px;"
        class="shadow-2 rounded-borders"
      >
        <q-header elevated>
          <q-toolbar>
            <q-avatar>
              <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg" />
            </q-avatar>
            <q-toolbar-title>
              App
            </q-toolbar-title>
          </q-toolbar>
        </q-header>

<q-page-container>
          <q-page padding>
            <p v-for="n in 15" :key="n">
              Lorem ipsum
            </p>

<q-page-scroller
              expand
              position="top"
              :scroll-offset="150"
              :offset="[0, 0]"
            >
              <div
                class="col cursor-pointer q-pa-sm bg-accent text-white text-center"
              >
                Scroll back up
              </div>
            </q-page-scroller>
          </q-page>
        </q-page-container>
      </q-layout>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data: {
          drawerLeft: true
        },
        methods: {}
      });
    </script>
  </body>
</html>

Ajax Bar

We can show the progress of an ajax request with the Ajax bar component.

For example, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-ajax-bar
          ref="bar"
          position="bottom"
          color="accent"
          size="10px"
          skip-hijack
        />
      </q-layout>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data: {},
        methods: {
          trigger() {
            const bar = this.$refs.bar;
            bar.start();

            this.timer = setTimeout(() => {
              if (this.$refs.bar) {
                bar.stop();
              }
            }, Math.random() * 3000 + 1000);
          }
        },
        mounted() {
          this.trigger();
        }
      });
    </script>
  </body>
</html>

We add the q-ajax-bar component to add the loading bar.

position set to bottom puts the bar at the bottom.

The trigger method shows the bar with the bar.start method.

And the setTimeout callback calls bar.stop to stop the bar from displaying.

Conclusion

We can add a scrollable page and loading bar into our Vue app with the Quasar library.

Quasar

Developing Vue Apps with the Quasar Library — Layouts

Post author By John Au-Yeung
Post date November 21, 2020
No Comments on Developing Vue Apps with the Quasar Library — Layouts

Quasar is a popular Vue UI library for developing good looking Vue apps.

In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.

Layout

We can create a simple layout with the q-layout component.

For instance, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 400px;"
        class="shadow-2 rounded-borders"
      >
        <q-drawer
          v-model="drawerLeft"
          :width="150"
          :breakpoint="700"
          behavior="desktop"
          bordered
          content-class="bg-grey-3"
        >
          <q-scroll-area class="fit">
            <div class="q-pa-sm">
              <div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
            </div>
          </q-scroll-area>
        </q-drawer>
      </q-layout>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data: {
          drawerLeft: true
        },
        methods: {},
        watch: {
          ["$q.screen"]: {
            handler() {
              this.drawerLeft = this.$q.screen.width > 700;
            },
            deep: true
          }
        }
      });
    </script>
  </body>
</html>

We add the q-layout component to use it as the layout container.

Then we add the q-drawer inside the q-layout to add a nav drawer.

In the Vue instance, we watch the value of $q.screen ‘s width property to get the width of the screen.

And we set drawerLeft to true only when this.$q.screen.width is bigger than 700 to show the drawer.

q-scroll-area lets us create a scrollable container.

Also, we can add a header and page content with the q-header and q-page-container components respectively.

For instance, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 400px;"
        class="shadow-2 rounded-borders"
      >
        <q-header reveal elevated>
          <q-toolbar>
            <q-btn
              flat
              round
              dense
              icon="menu"
              @click="drawerLeft = !drawerLeft"
            />

<q-toolbar-title>
              App
            </q-toolbar-title>
        </q-header>

        <q-drawer
          v-model="drawerLeft"
          :width="150"
          :breakpoint="700"
          behavior="desktop"
          bordered
          content-class="bg-grey-3"
        >
          <q-scroll-area class="fit">
            <div class="q-pa-sm">
              <div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
            </div>
          </q-scroll-area>
        </q-drawer>

        <q-page-container>
          <q-page padding style="padding-top: 66px;">
            <p v-for="n in 15" :key="n">
              Lorem ipsum
            </p>

            <q-page-sticky expand position="top">
              <q-toolbar class="bg-accent text-white">
                <q-avatar>
                  <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg" />
                </q-avatar>
                <q-toolbar-title>
                  Page Title
                </q-toolbar-title>
              </q-toolbar>
            </q-page-sticky>
          </q-page>
        </q-page-container>
      </q-layout>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data: {
          drawerLeft: true
        },
        methods: {},
      });
    </script>
  </body>
</html>

We add the q-header component above q-drawer to add the header.

And we have the q-page-container to add the page container.

q-page-sticky is a container to hold the page header.

expand makes it expandable.

The p element is the content displayed below the q-page-sticky component.

Conclusion

We can add layouts with various components with Quasar into our Vue app.

Quasar

Developing Vue Apps with the Quasar Library — More Flexbox Properties

Post author By John Au-Yeung
Post date November 21, 2020
No Comments on Developing Vue Apps with the Quasar Library — More Flexbox Properties

Quasar is a popular Vue UI library for developing good looking Vue apps.

In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.

Align Self

We can use the self-* classes to add the align-self CSS property into our child elements.

Horizontal Alignment

We can use the justify-* classes to horizontally align child elements.

For example, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <div class="row justify-center">
        <div class="col-4">
          1
        </div>
        <div class="col-4">
          2
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data() {
          return {};
        },
        methods: {}
      });
    </script>
  </body>
</html>

We add the justify-center class to center the child divs.

Also, we can add justify-start to align the child divs on the left.

justify-end align the child divs on the right.

justify-around spaces the child divs with even spacing in between them.

And justify-between spaces the child divs with space between them.

Column Wrapping

Columns will wrap to the next row automatically if the width exceeds 12 columns.

For example, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <div class="row">
        <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
        <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
        <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
        <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
      </div>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data() {
          return {};
        },
        methods: {}
      });
    </script>
  </body>
</html>

We have col-6 to make the div 6 columns wide if the screen hits the xs breakpoint.

col-sm-3 makes the div 3 columns if the screen hits the sm breakpoint or higher.

Offsetting Columns

We can use the offset-* classes to move divs by a given number of columns.

For instance, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="[https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons](https://medium.com/r/?url=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DRoboto%3A100%2C300%2C400%2C500%2C700%2C900%7CMaterial%2BIcons)"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
      </div>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data() {
          return {};
        },
        methods: {}
      });
    </script>
  </body>
</html>

We have offset-md-4 to shift the div 4 columns to the right if the screen hits the md breakpoint or wider.

Nesting

Also, we can nest flexbox rows and columns.

For instance, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <div class="row">
        <div class="col-sm-9">
          <p>Level 1</p>
          <div class="row">
            <div class="col-8 col-sm-6">
              Level 2
            </div>
            <div class="col-4 col-sm-6">
              Level 2
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data() {
          return {};
        },
        methods: {}
      });
    </script>
  </body>
</html>

to nest a row inside another column.

Conclusion

We can apply various flexbox CSS properties with the classes provided by Quasar.

Quasar

Developing Vue Apps with the Quasar Library — Breakpoints and Flexbox

Post author By John Au-Yeung
Post date November 21, 2020
No Comments on Developing Vue Apps with the Quasar Library — Breakpoints and Flexbox

Quasar is a popular Vue UI library for developing good looking Vue apps.

In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.

Breakpoints

Quasar uses the following breakpoints:

xs — Up to 599px
sm — Up to 1023px
md — Up to 1439px
lg — Up to 1919px
xl — Bigger than 1920px

Flexbox

Quasar comes with flexbox helper classes.

We can create rows with the row class and columns with the col class.

For example, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <div class="row">
        <div class="col">
          .col
        </div>
        <div class="col">
          .col
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data() {
          return {};
        },
        methods: {}
      });
    </script>
  </body>
</html>

The col class will divide the rows into equal-sized columns.

Setting One Column Width

We can specify the column width of a column.

For instance, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <div class="row">
        <div class="col">
          .col
        </div>
        <div class="col-6">
          .col-6
        </div>
        <div class="col">
          .col
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data() {
          return {};
        },
        methods: {}
      });
    </script>
  </body>
</html>

We set the middle column’s class to col-6 to make it wider.

The max-width of a column is 12 units.

Variable Width Content

We can add variable-width content with Quasar.

For instance, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <div class="row">
        <div class="col-12 col-md-2">
          .col-12 .col-md-2
        </div>
        <div class="col-12 col-md-auto">
          .col-12 .col-md-auto
        </div>
        <div class="col-12 col-md-2">
          .col-12 .col-md-2
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data() {
          return {};
        },
        methods: {}
      });
    </script>
  </body>
</html>

We have col-md-2 to make the column width 2 when the breakpoint is md .

col-md-auto makes the width automatically sized.

Alignment

We can change the alignment of the elements in the flexbox container with the classes provided by Quasar.

For example, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <div class="row items-start">
        <div class="col">
          1
        </div>
        <div class="col">
          2
        </div>
        <div class="col">
          3
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data() {
          return {};
        },
        methods: {}
      });
    </script>
  </body>
</html>

We have the items-start class to put all the column divs at the top of the container.

There’s also the items-center class to make the child elements vertically centered and items-end makes the child elements align to the bottom.

Conclusion

We can use the classes provided by Quasar to position and size our elements.