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>
Theme builder
Layout builder
we should
Top comments (0)