No one enjoys filling out a form. But there are ways we can build forms that are more interactive, promote engagement, and are less burdensome for the user. In this Vue Mastery article, we’re going to build an interactive and distraction-free form using advanced concepts of the Vue.js framework and other supporting libraries for form validation and animations.

Before we start, take a look at the demo (and here’s the GitHub repo).

When we talk about dynamic forms, what do we mean exactly? …


This article will take you through my learning journey into how I created a dynamic tree diagram that uses SVG (Scalable Vector Graphics) for drawing Cubic Bezier curve paths and Vue.js for data reactivity.

Before we start, take a look at the demo.

Combining the power of SVG and Vue.js framework allows creating diagrams and infographics that are data-driven, interactive and configurable.

This diagram is a collection of Cubic Bezier curves that start from a single point, but end on different points — at equal distance — based on user-provided data. So, the diagram is reactive to user input.

We’ll…


A brief summary of source code structure in Nuxt.js

Are you new to the Nuxt.js framework and totally overwhelmed by the number of folders it comes with? Are you also surprised that most of them are empty with just the readme file in them? Well, that’s where I was little over a year ago. Since then, I’ve always wanted to learn and document the magic that each folder brought into the Nuxt project.

And now, after implementing a few projects with this framework, I have documented my understanding of how these folders work together to bring the server-rendered Vue application to life.

The diagram above is based on Vue…


This post outlines my findings and highlights of creating dynamic drag-and-drop layout editor using Vue.js with two libraries, 1) Gridstack.js and 2) Vue Grid Layout.

This mini project serves as an experiment for pariksha.io — bitesize eLearning platform — which I’m currently working on. You can learn more about it @ https://www.pariksha.io

Inspiration


Let me give you a small introduction of my project before I begin. It’s called Pariksha.

What is Pariksha?

Pariksha is the result of my 8 years of experience in online learning industry.

I have authored Compliance, Corporate and Vocational Trainings using various authoring tools, Wordpress plugins and LMSs (Learning Management System).

Most LMS and Wordpress plugins provide one-click-at-a-time method of creating quiz assessments and they are bulky with so many features that nobody ever uses.

I wanted to change that.

So I created Pariksha — Bitesize eLearning Platform, where you can import questions in bulk via Excel and create…

Krutie Patel

#Nuxtjs 👑 #Vuejs✌️#Laravel⚡️2D Illustrator✏️ 🎧, Founder of https://mymemoir.io/ 📙 currently working on https://www.pariksha.io/ 👑 https://krutiepatel.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