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.
Tree View
We can add a tree view into our Vue app with Quasar’s q-tree component.
For instance, 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;">
<div class="q-pa-md">
<q-tree :nodes="data" node-key="label"> </q-tree>
</div>
</q-layout>
</div>
<script>
const data = [
{
label: "Satisfied customers",
avatar: "https://cdn.quasar.dev/img/avatar.png",
children: [
{
label: "Good food (with icon)",
icon: "restaurant_menu",
children: [
{ label: "Good ingredients" },
{ label: "Good recipe" }
]
},
{
label: "Good service (disabled node with icon)",
icon: "room_service",
disabled: true,
children: [
{ label: "Prompt attention" },
{ label: "Professional waiter" }
]
},
{
label: "Pleasant surroundings (with icon)",
icon: "photo",
children: [
{
label: "Happy atmosphere",
img: "https://cdn.quasar.dev/img/logo_calendar_128px.png"
},
{ label: "Good presentation" },
{ label: "Pleasing decor" }
]
}
]
}
];
new Vue({
el: "#q-app",
data: {
data
}
});
</script>
</body>
</html>
We pass the tree’s data into the node prop.
node-key has the unique ID of each tree node.
The disabled property lets us disable interactivity with a tree node.
We can remove the connectors with the no-connectors prop.
We can bind the selected node to a reactive property with the v-model directive.
For instance, 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-splitter v-model="splitterModel" style="height: 400px;">
<template v-slot:before>
<div class="q-pa-md">
<q-tree
:nodes="data"
node-key="label"
selected-color="primary"
:selected.sync="selected"
default-expand-all
>
</q-tree>
</div>
</template>
<template v-slot:after>
<q-tab-panels
v-model="selected"
animated
transition-prev="jump-up"
transition-next="jump-up"
>
<q-tab-panel name="Hotel">
<div class="text-h4 q-mb-md">Welcome</div>
<p>
Lorem ipsum dolor sit
</p>
</q-tab-panel>
<q-tab-panel name="Food">
<div class="text-h4 q-mb-md">Food</div>
<p>
Lorem ipsum dolor sit
</p>
</q-tab-panel>
<q-tab-panel name="Room service">
<div class="text-h4 q-mb-md">Room service</div>
<p>
Lorem ipsum dolor sit
</p>
</q-tab-panel>
<q-tab-panel name="Room view">
<div class="text-h4 q-mb-md">Room view</div>
<p>
Lorem ipsum dolor sit
</p>
</q-tab-panel>
</q-tab-panels>
</template>
</q-splitter>
</div>
<script>
const data = [
{
label: "Hotel",
children: [
{
label: "Food",
icon: "restaurant_menu"
},
{
label: "Room service",
icon: "room_service"
},
{
label: "Room view",
icon: "photo"
}
]
}
];
new Vue({
el: "#q-app",
data: {
data,
splitterModel: 50,
selected: "Food"
}
});
</script>
</body>
</html>
The splitterModel reactive property is bound to the label property value of the node that’s been clicked on.
Conclusion
We can add a simple tree view into our Vue app with Quasar’s q-tree component.
