Developing Vue Apps with the Quasar Library — Stepper

Developing Vue Apps with the Quasar Library — Stepper

In this article, we’ll take a look at how to create Vue apps with the Quasar UI library. Stepper. Quasar comes with the q-stepper component to let us create multi-step content. Developing Vue Apps with the Quasar Library — Stepper.

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.

Stepper

Quasar comes with the q-stepper component to let us create multi-step content.

For instance, we can use it by writing:

<!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/[email protected]/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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"
      >
        <div class="q-pa-md">
          <q-stepper v-model="step" ref="stepper" color="primary" animated>
            <q-step :name="1" title="Step 1" icon="settings" :done="step > 1">
              step 1
            </q-step>
            <q-step
              :name="2"
              title="Step 2"
              caption="Optional"
              icon="create_new_folder"
              :done="step > 2"
            >
              step 2
            </q-step>
            <q-step :name="3" title="Step 3" icon="assignment" disable>
              This step won't show up because it is disabled.
            </q-step>
            <q-step :name="4" title="Step 4" icon="add_comment">
              step 4
            </q-step>
            <template v-slot:navigation>
              <q-stepper-navigation>
                <q-btn
                  @click="$refs.stepper.next()"
                  color="primary"
                  :label="step === 4 ? 'Finish' : 'Continue'"
                >
                </q-btn>
                <q-btn
                  v-if="step > 1"
                  flat
                  color="primary"
                  @click="$refs.stepper.previous()"
                  label="Back"
                  class="q-ml-sm"
                >
                </q-btn>
              </q-stepper-navigation>
            </template>
          </q-stepper>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          step: 1
        }
      });
    </script>
  </body>
</html>

The v-model binds to the step number.

We put the q-step components inside the q-stepper to show the step content.

The name prop has the step number which is compared with the step reactive property to determine which step to display.

The title prop is shown in the title bar.

caption is the subtitle of the step.

icon has the icon name.

And done is the condition when the step icon and text highlighted.

javascript web-development technology programming

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

JS Development Company India | JavaScript Development Services

Best JavaScript web app development company in India, PixelCrayons provides full stack JS development & maintenance. 16+ Yrs Exp., 60% less cost, Strict NDA

JavaScript Web Developer Bootcamp - Complete Guide to Become JavaScript Developer

In this Video we will learn these concept and there are almost 10+ Project in javaScript. One Video For becoming web developer. This video will teach you web development from scratch.

Temporal Dead Zone in JavaScript Explained (TDZ)

Temporal dead zone in JavaScript (TDZ) is one of the topics every JavaScript developer should know. This tutorial will teach you all you need to know about it. You will learn what temporal dead zone in JavaScript is and how it works. You will also learn about scope and variable declaration and initialization.

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.