Categories
Quasar

Developing Vue Apps with the Quasar Library — Layouts

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *