Image for post
Image for post
Photo by Venu Gopinath Nukavarapu on Unsplash

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Form Layouts

The PrimeFlex library that’s part of the PrimeVue framework comes with classes for creating form layouts.

For example, we can use the p-field class by writing:

We use it to layout fields.

Also, we can write:


Image for post
Image for post
Photo by Lars Millberg on Unsplash

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

Validating Custom Inputs

We can use Vee-Validate 4 to validate custom input components.

For example, we can write:

components/TextInput.vue


Image for post
Image for post
Photo by Alex Iby on Unsplash

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a tip calculator app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

with NPM or:

with Yarn.

Then we run:

and select all the default options to create the project.

Create a Tip Calculator App

To create the tip calculator app, we write:


Image for post
Image for post
Photo by kazuend on Unsplash

Dropdowns are something that we have to add often into our React app.

To make this task easier, we can use existing component libraries to add them.

In this article, we’ll look at how to add dropdowns into our React app with the react-overlays library.

Dropdowns

We can add dropdowns easily with the Dropdown component and the useDropdownMenu and useDropdownToggle hooks.

For example, we can write:


Image for post
Image for post
Photo by Patrick Mayor on Unsplash

Visx is a library that lets us add graphics to our React app easily.

In this article, we’ll look at how to use it to add radar charts into our React app.

Install Required Packages

We have to install a few modules.

To get started, we run:

to install the packages for the network diagram.

And we run:

to install the packages for the streamgraph.

Network Diagram

We can add a network diagram by writing:


Image for post
Image for post
Photo by Victor Freitas on Unsplash

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a weight converter app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

with NPM or:

with Yarn.

Then we run:

and select all the default options to create the project.

Create the Weight Converter App

To create the weight converter app, we write:


Image for post
Image for post
Photo by Susan Holt Simpson on Unsplash

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

Yup Schemas in Data

Making our validation schema reactive is an unnecessary overhead that we can eliminate.

To do this, we can either add the schema with the setUp method or call markRaw with our schema to make it non-reactive.

For example, we can write:


Image for post
Image for post
Photo by Battlecreek Coffee Roasters 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.

Loading Indicator

We can add a loading indicator with the $q.loading object:


Image for post
Image for post
Photo by Trnava University on Unsplash

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

min

The min rule specifies that the length of the inputted value shouldn’t be less than the specified length.

For instance, we can write:


Image for post
Image for post
Photo by Nathan Anderson on Unsplash

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create an image slider app with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

with NPM to create our React project.

Create the Image Slider App

To create the image slider app, we write:

John Au-Yeung

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store