Quasar Framework- Simple login form design (UDM)

Open BasketZ February 05, 2023



Quasar is a free, open-source framework for building responsive, high-performance user interfaces for the web. It is built on top of Vue.js and provides a comprehensive set of UI components, CSS utilities, and other tools for building modern web applications. Quasar also supports mobile and desktop platforms, allowing developers to build apps that run natively on both platforms.


With its focus on performance, accessibility, and ease of use, Quasar is a popular choice for building progressive web apps, hybrid mobile apps, and desktop apps. It supports popular CSS frameworks such as Material Design, iOS Design, and Spectre.css, and provides a wide range of components, including form inputs, navigation menus, data tables, and more.


In addition to its UI components, Quasar also provides a range of features for building complex, scalable applications, including an efficient, optimized build process, support for server-side rendering, and state management with Vuex. Quasar also integrates well with other popular JavaScript libraries and tools, making it a flexible and versatile framework for building modern web applications.


Step 1: Setting up an HTML file

Create an HTML file, let's call it index.html. In this file, include the Quasar UMD (Unified Module Definition) library:


<!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@2.11.5/dist/quasar.prod.css" rel="stylesheet" type="text/css">  
  </head>  
  <body>    
   <div id="q-app">  
       <!-- example of injection point where you write your app template -->  
   </div>  
   <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>  
   <script src="https://cdn.jsdelivr.net/npm/quasar@2.11.5/dist/quasar.umd.prod.js"></script>    
   <script>  
   const app = Vue.createApp({  
     setup () {  
      return { 
      }  
     }  
    })  
    app.use(Quasar)  
    app.mount('#q-app')  
   </script>  
  </body>  
 </html>


Step 2: Write input field by Quasar component

Add the following code between the div which has an id named q-app: 


   <q-page>  
    <q-form class="q-pa-md">  
     <q-input v-model="username" label="Username" type="text" class="q-mt-md" />  
     <q-input v-model="password" label="Password" type="password" class="q-mt-md" />  
     <q-btn label="Submit" class="q-mt-md" />  
    </q-form>  
   </q-page>

Here used 4 elements to make the login form- 1. <q-page>

2. <q-form>

3. <q-input>

4. <q-btn>

Step 3: Running the App

Open the index.html file in your browser, and you should now see the login form.


That's it! You have now created a login form using Quasar UMD. You can extend this form by adding more fields, custom validation, and integrating with an API for authentication.
Tags:

Post a Comment

0 Comments