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.
Customized Uploader Header
We can customize the header by populating the header slot:
<!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-uploader url="http://localhost/upload" label="Custom header" multiple>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
<q-btn
v-if="scope.queuedFiles.length > 0"
icon="clear_all"
@click="scope.removeQueuedFiles"
round
dense
flat
>
<q-tooltip>Clear All</q-tooltip>
</q-btn>
<q-btn
v-if="scope.uploadedFiles.length > 0"
icon="done_all"
@click="scope.removeUploadedFiles"
round
dense
flat
>
<q-tooltip>Remove Uploaded Files</q-tooltip>
</q-btn>
<q-spinner
v-if="scope.isUploading"
class="q-uploader__spinner"
></q-spinner>
<div class="col">
<div class="q-uploader__title">Upload your files</div>
<div class="q-uploader__subtitle">
{{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
</div>
</div>
<q-btn
v-if="scope.canAddFiles"
type="a"
icon="add_box"
round
dense
flat
>
<q-uploader-add-trigger></q-uploader-add-trigger>
<q-tooltip>Pick Files</q-tooltip>
</q-btn>
<q-btn
v-if="scope.canUpload"
icon="cloud_upload"
@click="scope.upload"
round
dense
flat
>
<q-tooltip>Upload Files</q-tooltip>
</q-btn>
<q-btn
v-if="scope.isUploading"
icon="clear"
@click="scope.abort"
round
dense
flat
>
<q-tooltip>Abort Upload</q-tooltip>
</q-btn>
</div>
</template>
</q-uploader>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
methods: {}
});
</script>
</body>
</html>
scope.queuedFiles has an array of files added for upload.
scope.removeQueuedFiles is a method to remove the queued files.
scope.uploadedFiles has an array of the uploaded files.
scope.removeQueuedFiles is a method to remove the uploaded files.
scope.canAddFiles is a boolean that indicates if we can add files.
scope.uploadSizeLabel has the total size of the files uploaded.
scope.uploadProgressLabel has the upload progress.
scope.canUpload lets us know if we can upload.
Video
Quasar comes with a video component to let us embed videos.
For example, we can add a YouTube video by writing:
<!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-video src="https://www.youtube.com/embed/KfYrKGPUi94"> </q-video>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
methods: {}
});
</script>
</body>
</html>
We add it by setting src to the embed URL.
We can set the aspect ratio with the ratio 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-video :ratio="16/9" src="https://www.youtube.com/embed/KfYrKGPUi94">
</q-video>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
methods: {}
});
</script>
</body>
</html>
Virtual Scrolling
Quasar comes with a virtual scrolling container component.
It lets us render data that are only shown on the screen instead of rendering everything, increasing performance.
For example, 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-virtual-scroll style="max-height: 300px;" :items="heavyList" separator>
<template v-slot="{ item, index }">
<q-item :key="index" dense>
<q-item-section>
<q-item-label>
#{{ index }} - {{ item.label }}
</q-item-label>
</q-item-section>
</q-item>
</template>
</q-virtual-scroll>
</div>
<script>
const maxSize = 10000;
const heavyList = [];
for (let i = 0; i < maxSize; i++) {
heavyList.push({
label: `option ${i}`
});
}
new Vue({
el: "#q-app",
data: {
heavyList
}
});
</script>
</body>
</html>
to add it.
We add the item into the default slot to render it.
items has the items.
separator adds a separator between items.
Conclusion
We can add a file uploader into our Vue app with Quasar’s q-uploader component.
Also, we can add videos and virtual scrolling into our Vue app with Quasar.
