Member-only story

Developing Vue Apps with the Quasar Library — Paginator and Parallax Scroll

John Au-Yeung
3 min readFeb 11, 2021

--

Photo by Bruno Aguirre on Unsplash

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.

Remove Ellipses from Paginator

We can set the ellipses prop to false to remove the ellipses from the paginator.

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;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-pagination
:max="10"
:max-pages="6"
:boundary-numbers="false"
:ellipses="false"
v-model="current"…

--

--

No responses yet