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.
Chips
We can add chips to show small bits of information.
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> …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.
Custom Carousel Controls
We can add custom carousel controls by populating the control slot.
To do this, 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-carousel
swipeable
animated
v-model="slide"
:autoplay="autoplay"
ref="carousel"
infinite
>
<q-carousel-slide
:name="1"
img-src="https://cdn.quasar.dev/img/mountains.jpg"
>
</q-carousel-slide>
<q-carousel-slide
:name="2"
img-src="https://cdn.quasar.dev/img/parallax1.jpg"
>
</q-carousel-slide>
<q-carousel-slide
:name="3"
img-src="https://cdn.quasar.dev/img/parallax2.jpg"
>
</q-carousel-slide>
<template v-slot:control>
<q-carousel-control
position="top-right"
:offset="[18, 18]"
class="text-white rounded-borders"
style="background: rgba(0, 0, 0, 0.3); …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.
Carousel with Image Captions
We can add carousels with image captions.
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"
/>
<style>
.custom-caption {
text-align: center;
padding: 12px;
color: white;
background-color: rgba(0, 0, 0, 0.3);
}
</style>
</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-carousel arrows animated v-model="slide" height="400px">
<q-carousel-slide
name="first"
img-src="https://cdn.quasar.dev/img/mountains.jpg"
>
<div class="absolute-bottom custom-caption">
<div class="text-h2">First stop</div>
<div class="text-subtitle1">Mountains</div>
</div>
</q-carousel-slide>
<q-carousel-slide
name="second"
img-src="https://cdn.quasar.dev/img/parallax1.jpg"
>
<div class="absolute-bottom custom-caption">
<div class="text-h2">Second stop</div>
<div class="text-subtitle1">City</div>
</div>
</q-carousel-slide>
<q-carousel-slide
name="third"
img-src="https://cdn.quasar.dev/img/parallax2.jpg" …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.
Vertical Carousel
We can make a carousel vertical with the vertical 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://use.fontawesome.com/releases/v5.0.13/css/all.css"
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-carousel
v-model="slide"
vertical
transition-prev="scale"
transition-next="scale"
swipeable
animated
control-color="white"
navigation
padding
arrows
height="300px"
class="bg-primary text-white shadow-1 rounded-borders"
>
<q-carousel-slide name="style" class="column no-wrap flex-center">
<q-icon name="style" size="56px"></q-icon>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="tv" class="column no-wrap flex-center">
<q-icon name="live_tv" size="56px"></q-icon>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="layers" class="column no-wrap flex-center">
<q-icon name="layers" size="56px"></q-icon>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="map" class="column no-wrap flex-center">
<q-icon name="terrain" size="56px"></q-icon>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
</q-carousel>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
slide: "style",
lorem: "Lorem ipsum"
}
});
</script>
</body>…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.
Carousels
We can add carousels into our Vue app with the q-carousel 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;"
class="shadow-2 rounded-borders"
>
<q-carousel
v-model="slide"
transition-prev="slide-right"
transition-next="slide-left"
animated
control-color="primary"
class="rounded-borders"
>
<q-carousel-slide name="style" class="column no-wrap flex-center">
<q-icon name="style" color="primary" size="56px"></q-icon>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="tv" class="column no-wrap flex-center">
<q-icon name="live_tv" color="primary" size="56px"></q-icon>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="layers" class="column no-wrap flex-center">
<q-icon name="layers" color="primary" size="56px"></q-icon>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="map" class="column no-wrap flex-center">
<q-icon name="terrain" color="primary" size="56px"></q-icon>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>…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.
Card Title
We can add titles inside an image with the q-img component:
<!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-card class="my-card">
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg" …To make MongoDB database manipulation easy, we can use the Mongoose NPM package to make working with MongoDB databases easier.
In this article, we’ll look at how to use Mongoose to manipulate our MongoDB database.
Updating
We can update the first with the given key and value with the updateOne method.
For example, we can write:
const mongoose = require('mongoose');
const connection = mongoose.createConnection('mongodb://localhost:27017/test');
const schema = new mongoose.Schema({ name: 'string', size: 'string' });
const Tank = connection.model('Tank', schema);
Tank.updateOne({ size: 'small' }, { name: 'small tank' }, (err) => {
if (err) {
return console.log(err);
}
});The first argument is the query for the document. …
To make MongoDB database manipulation easy, we can use the Mongoose NPM package to make working with MongoDB databases easier.
In this article, we’ll look at how to use Mongoose to manipulate our MongoDB database.
Models
We can create models so we can use them as templates to create a document in the MongoDB database.
For example, we can write:
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/test')
const schema = new mongoose.Schema({ name: 'string', size: 'string' });
const Tank = mongoose.model('Tank', schema);
const small = new Tank({ size: 'small' });
small.save((err) => {
if (err) {
return console.log(err);
}
});We called mongoose.Schema that has the name and size string fields. …
To make MongoDB database manipulation easy, we can use the Mongoose NPM package to make working with MongoDB databases easier.
In this article, we’ll look at how to use Mongoose to manipulate our MongoDB database.
Connections
We can connect to a MongoDB database with Mongoose.
To do that, we write:
const mongoose = require('mongoose');
const connection = "mongodb://localhost:27017/test";
mongoose.connect(connection, { useNewUrlParser: true });
const db = mongoose.connection;
db.on('error', () => console.error('connection error:'));
db.once('open', () => {
console.log('connected')
});We connect to the server with the URL and the test collection name.
Operation Buffering
We can start using the models immediately without waiting fir Mongoose to establish a connection. …
Node.js is a popular runtime platform to create programs that run on it.
It lets us run JavaScript outside the browser.
In this article, we’ll look at how to start using Node.js to create programs.
Logging with Morgan
To let us debug our Node.js apps easily, we can use the morgan package to add a logger into our app.
To install it, we run:
npm i morganThen we can use it by writing:
const Morgan = require('morgan'),
Router = require('router'),
http = require('http');
router = new Router();
router.use(Morgan('tiny'));http.createServer(function(request, response) {
router(request, response, function(error) {
if (!error) {
response.writeHead(404);
} else {
console.log(error.message, error.stack);
response.writeHead(400);
}
response.end('\n'); …
About
