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.
Avatar
We can add avatars into our Vue app with the provided avatar components.
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-avatar color="red" text-color="white" icon="directions" />
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
to add the avatar,.
color sets the background color. text-color sets the text color.
icon sets the icon name.
We can also add an image as the avatar:
<!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-avatar>
<img
src="https://i.picsum.photos/id/23/200/200.jpg?hmac=IMR2f77CBqpauCb5W6kGzhwbKatX_r9IvgWj6n7FQ7c"
/>
</q-avatar>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
Also, we can change the size with the size 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-avatar
size="100px"
font-size="52px"
color="green"
text-color="white"
icon="directions"
/>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We can make is square with the square 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-avatar
square
size="100px"
font-size="52px"
color="green"
text-color="white"
icon="directions"
/>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We can make corners rounded with the rounded 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-avatar
rounded
size="100px"
font-size="52px"
color="green"
text-color="white"
icon="directions"
/>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
Avatars can be added into chips:
<!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-chip>
<q-avatar color="red" text-color="white">100</q-avatar>
Emails
</q-chip>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
They can also be added into buttons:
<!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 round>
<q-avatar size="28px">
<img
src="https://i.picsum.photos/id/23/200/200.jpg?hmac=IMR2f77CBqpauCb5W6kGzhwbKatX_r9IvgWj6n7FQ7c"
/>
</q-avatar>
</q-btn>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
Conclusion
We can add avatars into our Vue app with the Quasar library.
