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.
Breadcrumbs
Quasar comes with the q-breadcrumbs
component to let us add breadcrumbs.
To use it, we 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: 100vh;"
class="shadow-2 rounded-borders"
>
<q-breadcrumbs>
<q-breadcrumbs-el label="Home"></q-breadcrumbs-el>
<q-breadcrumbs-el label="Components"></q-breadcrumbs-el>
<q-breadcrumbs-el label="Breadcrumbs"></q-breadcrumbs-el>
</q-breadcrumbs>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We add the q-breadcrumbs
components as the container.
And we add the breadcrumb entries with the q-breadecrumbs-el
component.
The label
is the text we display.
We can add icons with the icon
prop:
<!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: 100vh;"
class="shadow-2 rounded-borders"
>
<q-breadcrumbs>
<q-breadcrumbs-el label="Home"></q-breadcrumbs-el>
<q-breadcrumbs-el
label="Components"
icon="widgets"
></q-breadcrumbs-el>
<q-breadcrumbs-el label="Breadcrumbs"></q-breadcrumbs-el>
</q-breadcrumbs>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We can also add it inside a q-toolbar
:
<!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: 100vh;"
class="shadow-2 rounded-borders"
>
<q-toolbar>
<q-btn flat round dense icon="assignment_ind" />
<q-toolbar-title>Quasar</q-toolbar-title>
<q-btn flat round dense icon="sim_card" class="q-mr-xs" />
<q-btn flat round dense icon="gamepad" />
</q-toolbar>
<q-toolbar inset>
<q-breadcrumbs>
<q-breadcrumbs-el label="Home"></q-breadcrumbs-el>
<q-breadcrumbs-el
label="Components"
icon="widgets"
></q-breadcrumbs-el>
<q-breadcrumbs-el
label="Breadcrumbs"
></q-breadcrumbs-el> </q-breadcrumbs
></q-toolbar>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We add the q-toolbar
component with the q-breadcrumbs
component inside.
The inset
makes the breadcrumb component align inside the toolbar.
Button
We can add buttons into our Vue app with the q-btn
component.
For example, 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: 100vh;"
class="shadow-2 rounded-borders"
>
<q-btn color="white" text-color="black" label="Standard"></q-btn>
<q-btn color="primary" label="Primary"></q-btn>
<q-btn color="secondary" label="Secondary"></q-btn>
<q-btn color="amber" glossy label="Amber"></q-btn>
<q-btn color="brown-5" label="Brown 5"></q-btn>
<q-btn color="deep-orange" glossy label="Deep Orange"></q-btn>
<q-btn color="purple" label="Purple"></q-btn>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We add the q-btn
components to add the buttons.
color
sets the background color.
label
sets the button text.
glossy
makes the button glossy.
Conclusion
We can add breadcrumbs and buttons into our Vue app with Quasar.