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.
Add Our Own Editor Features
We can add our own features to the Quasar WYSIWYG editor.
To add our own dropdown that lets us add preset text, 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-editor
v-model="editor"
ref="editor"
toolbar-text-color="white"
toolbar-toggle-color="yellow-8"
toolbar-bg="primary"
:toolbar="[
['token'],
['bold', 'italic', 'underline'],
[{
label: $q.lang.editor.formatting,
icon: $q.iconSet.editor.formatting,
list: 'no-icons',
options: ['p', 'h3', 'h4', 'h5', 'h6', 'code']
}]
]"
>
<template v-slot:token>
<q-btn-dropdown
dense
no-caps
ref="token"
no-wrap
unelevated
color="white"
text-color="primary"
label="Token"
size="sm"
>
<q-list dense>
<q-item tag="label" clickable @click="add('email')">
<q-item-section side>
<q-icon name="mail" />
</q-item-section>
<q-item-section>Email</q-item-section>
</q-item>
<q-item tag="label" clickable @click="add('title')">
<q-item-section side>
<q-icon name="title" />
</q-item-section>
<q-item-section>Title</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</template>
</q-editor>
<q-card flat bordered>
<q-card-section>
<pre style="white-space: pre-line;">{{ editor }}</pre>
</q-card-section>
</q-card>
<q-card flat bordered>
<q-card-section v-html="editor"></q-card-section>
</q-card>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
editor: ""
},
methods: {
add(name) {
const edit = this.$refs.editor;
this.$refs.token.hide();
edit.caret.restore();
edit.runCmd(
"insertHTML",
` <div class="editor_token row inline items-center" contenteditable="false"> <span>${name}</span> <i class="q-icon material-icons cursor-pointer" onclick="this.parentNode.parentNode.removeChild(this.parentNode)">close</i></div> `
);
edit.focus();
}
}
});
</script>
</body>
</html>
We populate the token slot with a dropdown.
Then dropdown options run the add method.
The method calls runCmd to add our own HTML into the editor box.
It’ll also be added to the editor reactive property that we bound to the editor.
The insertHTML command inserts HTML into our editor.
Expansion Item
The q-expansion-item component lets us display more items when we click on it.
To use it, 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-expansion-item
v-model="expanded"
icon="perm_identity"
label="Settings"
caption="James"
>
<q-card>
<q-card-section>
Lorem ipsum dolor sit amet
</q-card-section>
</q-card>
</q-expansion-item>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
expanded: false
}
});
</script>
</body>
</html>
We add the q-expansion-item component with the v-model directive to bind to its open state.
icon has the name of the icon displayed on the left,.
label has the label displayed on the top.
caption is displayed below the label and it’s smaller than it.
When we click on it, the text in the q-card will be toggled on and off.
Conclusion
We can add extra editor features to the Quasar WYSIWYG editor.
Also, we can add a component to toggle more content into our Vue app with the q-expansion-item component.
