Quasar

Style

Quasar component and css style is almost same of Vuetify. If you are familiar with Vuetify, Quasar is easy to understand.

<q-layout view="hHh lpR fFf">
    // same of Vuetify's v-app-bar
    <q-header>...

    // same of Vutify's v-navigation-drawer
    <q-drawer>...

    // specify color with class
    <div class=text-blue bg-primary>

Theme builder

You can create your project's theme with the theme builder.

After build, you will get your style. Below is the example in SASS.

$primary   : #027BE3
$secondary : #26A69A
$accent    : #9C27B0

$dark      : #1D1D1D

$positive  : #21BA45
$negative  : #C10015
$info      : #31CCEC
$warning   : #F2C037

$primary   : #f39800
$secondary : #f19c00
$accent    : #f17b38

Set your them in Quasar option.

quasar-user-option.js

export default {
  config: {
    brand: {
      primary: "#f39800",
      secondary: "#f19c38",
      accent: "#f17b38",

      dark: "#1d1d1d",

      positive: "#55e700",
      negative: "#e70055",
      info: "#0055e7",
      warning: "#e7d400",
    },
  },
  plugins: {},
  lang: lang,
};

Use Quasar with the option in Vue.

main.ts

import quasarUserOptions from "./quasar-user-options";

const app = createApp(App);
app.use(Quasar, quasarUserOptions);

Layout builder

Quasar provides us common layout patterns. At first before/after we can generate Vue template with GUI.

The generated template is compatible with Vue Router. You just copy and paste it into your root Vue component.

PrimeVue

Style

<template>
  <div class=>
  <div>
    <Menubar :model="items">
      <template #start>
        asa
        <i style="color: var(--text-color)" class="pi pi-apple"></i>
      </template>
    </Menubar>
    <router-view></router-view>
  </div>