DEV Community: Anjolaoluwa Ogunmefun

Using VueQuill editor in Vue.Js3

Anjolaoluwa Ogunmefun — Wed, 28 Jul 2021 16:38:30 +0000

It is important to note that at the time this article is written, the Vue-quill editor is in the beta phase meaning it is still in its pre-release, testing phase hence is not entirely stable and some features can change.

Introduction

Quill editor is an API-driven text editor designed to enable users to write texts, incorporating a few modern ideas and beautiful formatting.
Some reasons why one would consider Quill editor as a good choice are because;

It provides custom content and formatting- Quill introduced its own document model, which is a powerful abstraction of the DOM and supports scalability and customization. There are no restrictions on the formats and content that Quill can support. Users have already used it to add embedded slideshows, interactive lists, and 3D. Role model.

It provides cross-platform usage- Quill is not only concerned that it works but also that it works the same way across all browsers. meaning the same action will produce the same effect across all browsers, both mobile and web.

It is super easy to use.

VueQuill

is a Vue component used to create a text editor powered by Vue 3 and Quill. This package is a thin Quill wrapper that can be easily used in Vue 3 applications

Installation

Vuequill can be installed easily through npm or yarn



npm install @vueup/vue-quill@beta --save

yarn add @vueup/vue-quill@beta

Importing package

Vuequill can be registered locally(in a specific file)or globally(in your main.js file).

Locally:



<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default {
  components:{
    QuillEditor
  }
}

</script>

Globally:



import { createApp } from 'vue'
import App from './App.vue'

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const app = createApp(App)

app.component('QuillEditor', QuillEditor) 

app.mount('#app')

It is important to note that the component itself does not include any CSS theme. The package comes with two themes; Snow and Bubble.
You’ll need to include it separately as seen in the snippet above i.e



import '@vueup/vue-quill/dist/vue-quill.snow.css'
 or
import '@vueup/vue-quill/dist/vue-quill.bubble.css'

Usage

Inside the file where the text editor is needed, add the following code



<QuillEditor theme="snow"/>

When you run your project, you should see something like this;

Note: The height and width of the editor can be adjusted by using CSS

Binding the VueQuill editor content

It is common to want to have the content of the Vuequill text editor bound to a data property in your app to carry out further actions with it. Unlike the regular method used to bind data properties in Vue, Vuequill requires an extra step, the :content.



v-model:content="dataProperty"

VueQuill editor listening for events

Actions can be carried out with the Vuequill editor and listening for events can trigger these actions. Events like @blur, @focus, @change, and @ready. You can then write a method to carry out your desired action parsing the event as an argument.



  <QuillEditor theme="snow"
      @blur="onEditorBlur($event)" 
      @focus="onEditorFocus($event)" 
      @change="onEditorChange($event)" 
      @ready="onEditorReady($event)"
      />

For example, I want to assign a default value to the Vuequill editor. I will use the @ready event
The method call will look like this:




onEditorReady (e) {
    console.log(e);
    e.container.querySelector('.ql-blank').innerHTML = this.form.content
},

This article covers the basic usage of Vuequill editor. I hope you found it useful!

Installing Tailwind CSS in Vue3 Project

Anjolaoluwa Ogunmefun — Mon, 19 Jul 2021 01:09:31 +0000

Introduction

Tailwind CSS is a utility-first CSS framework, a great tool to create that eye catching interface all with inline styling (without a single line of your own css).

Tailwind CSS isn't the first utility-first CSS library, but at the moment it is safe to say it's becoming the most popular among developers.

Installing Tailwind varies depending on your project's framework (React, Nuxt.js, Vue.js, Next.js, Gatsby, Laravel) making it available over a pretty wide range of frameworks which I think even makes it cooler!.

This article is focused on installing Tailwind css in a Vue 3 project. To follow along, all you need is a Vue 3 project set up in your favorite code editor. (Know how to here).

That said, Let's get right to it!

Install Tailwind CSS

Installing via CDN is an option but is not the best one according to the official documentation. To get the most out of Tailwind it is advised you install via npm.

In your project src folder create a css folder containing a file named tailwind.css.

Inside tailwind.css add the following code;


@tailwind base;
@tailwind components;
@tailwind utilities;

The three lines above are called the Tailwind Directives.

In your code editor, open up the terminal and run the below command to install tailwind css and its dependencies via npm.

npm install tailwindcss postcss autoprefixer

It is possible to get the below error message when you try to run the project;

Error: PostCSS plugin tailwindcss requires PostCSS 8.

The simple explanation is, Vue 3 (as at the time this article is written) does not yet have PostCSS 8 support and the command above is trying to integrate Tailwind with a tool that relies on older version of PostCSS.

Run the following code to uninstall previous installation and fix the error

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Next, you need to generate both Tailwind and PostCSS config files

npx tailwindcss init -p

Your config files should look like this

postcss.config file

tailwindcss.config file

Finally, open up your main.js file and import the tailwind.css file containing the tailwind directives i.e

import './css/tailwind.css'

Tailwind CSS is up and ready to create beauty!

Optimizing Tailwind CSS for production

It is very important to note that alongside installing, there's a crucial part of tailwind that its users must be aware of and that's it's optimization.

Tailwind generates thousands of utility classes and upon building the project, these css files could be surprisingly large which no one would appreciate in the production bundle.
Tailwind CSS comes inbuilt with a tool - PurgeCSS. What this does is to scan your files for unused css styles and then 'purge' them. The files to purge are provided in the purge array inside your tailwind.config file.

There are two ways to go about it.

The first is to provide the path to each file consuming css styles like this;


module.exports = {
  purge: ["./src/App.vue",
          "./src/PageOne.vue",
          "./src/PageTwo.vue"
        ],
}

Or you use a glob like this;


module.exports = {
  purge:["./src/**/*.vue"],
}

This says look into the src folder slash any sub directory and then any file that ends in .vue. This covers pretty much all the sub folders and files as opposed to providing individual paths.

Pretty straight forward right? I hope you found this article useful.

Deploy Vue.js projects to Heroku

Anjolaoluwa Ogunmefun — Mon, 19 Jul 2021 00:30:41 +0000

The first time I was to ever host a Vue app on Heroku was a hustle. I ran into multiple errors which then inspired this article to help make the life of my fellow Vue developers easier by putting together the right and easy way to host apps on Heroku.

Heroku is one of the tools used by developers to deploy, manage, and scale modern apps. Some reasons you would want to choose Heroku as your host is because it's user friendly, supports several databases and data stores, you also have the option to link your app directly from GitHub and enable default deployment each time you push some code into master (isn't that amazing!).

To follow along, I want to assume you have a Vue app up and running and you also have an Heroku account. That out of the way, lets get right into it.

Create a node server

The first step is to create a node server to serve your Vue files and writing a simple express server can help get the job done. Run the following command to install express and serve-static.



npm install express serve-static

Then create a file in the root of your project called server.js (feel free to name it as you please) and then add the following code blocks.



const express = require('express');
const serveStatic = require("serve-static")
const path = require('path');
app = express();
app.use(serveStatic(path.join(__dirname, 'dist')));
const port = process.env.PORT || 3000;
app.listen(port);

Add package.json scripts




"postinstall": "npm run build",
"start": "node server.js"

The "postinstall" script is the script Heroku will run after installing dependencies but before starting the app while the "start" script is the default script Heroku will try to run once all dependencies are installed to start the app.

Note: incase you didn't name your file server.js, remember to use your correct naming (node [file-name].js).

GitHub and Heroku

The next step is to create a GitHub repository for your project (if you don't have one already) and then push your ready to be deployed code to the branch you choose to deploy.
From your Heroku dashboard create a new app

Afterwards, choose the GitHub option(connect to GitHub) as your deployment method. select the appropriate repository to deploy.

You should see something like the images below. Enabling automatic deploy is optional but then why not?

After enabling automatic deploy, click on Deploy branch (the second image).
This could take a while but by the time it's done deploying, your app is LIVE on Heroku.

You have successfully deployed your Vue.js project to Heroku!