Posted on

Vue 3 Reactivity Composition API Using Reactive() And Ref()

Reactivity is a key pillar for building VueJS applications. While VueJS Reactivity using Options API is quite powerful, more and more developers are moving to Composition API for building their Vue applications. Thankfully, Vue 3 Reactivity with Composition API is equally robust.

Vue 3 Reactivity with Composition API is driven by reactive() and ref() functions. These functions turn the component model data reactive so that Vue is able to track changes. However, both reactive() and ref() have their specific use-cases. It is important to know which function should be used in which particular scenario.

Posted on

7 Common Vue.js Mistakes You Should Never Make

I was using different frameworks but have not used Vue.js until recently. My friend told me about Vue.js and encouraged me to give it a try. When I started using Vue.js, I encountered several issues, problems, challenges, and even made a lot of mistakes along the way. So, I decided to share my experience with others so that other developers don’t have to go through the same ordeal as I did.

Vue.js

If you are not familiar with Vue.js is, Vue is basically a framework for designing user interfaces. What differentiates it from other frameworks is that it is designed with incremental adaptability in mind. Even the main library focuses on the view layer, but it can easily be integrated with other libraries.

Posted on

Validate Street Addresses With Vue.js and the HERE Geocoder Autocomplete API

When it comes to geocoding, being able to convert addresses to latitude and longitude coordinates so they can be displayed on a map is not the only use-case. A lot of times being able to geocode an address makes for great address validation to see if an address actually exists. Take for example a tutorial written by Jayson DeLancey titled, Street Address Form Validation with React.js and HERE Geocoder Autocomplete. In this tutorial, he demonstrated how to accept user input, offer suggestions, and ultimately check to see if the addresses are valid using React and the APIs found in the HERE Developer Portal.

We're going to change it up a bit. Instead of using React, we're going to try to validate addresses using Vue.js, another very popular framework for web development.

Posted on

Vue Tutorial: How to Create an Interactive YouTube Video Selection

In this post I want to share my observations during my implementation of an interactive YouTube Video selection in Vue. Maybe this can save you some time, if you plan to do the same.

Let’s start with my motivation. It came from the improvements of the #BlueCloudMirror game UI. We decided to provide the #BlueCloudMirror users a recorded YouTube LiveStream of us. This video provides an awesome overview of our major technologies.

Posted on

Renaming src Folder of a Vue CLI 3 Project

The challenge of designing a good CLI tool is to balance sensible defaults with the freedom to customize.

One of the best CLI tools I know of is Vue CLI 3. One of its "sensible defaults" is that the source files, e.g. uncompiled components and JavaScript files, will be in a directory called src.

Posted on

Get Started With Vue Grid in 5 Minutes

Vue is the most responsive and progressive framework which is widely used in Single Page Applications. It provides one of the more powerful and flexible ways to display data in a tabular format using the JQWidget Grid component. Grid components are widely used to show smaller/larger sets of data in readable format. You can show read-only views or editable views.

In this article, we will quickly implement JQwidget grid components in Vue with very little coding and configuration.

Posted on

Full-Stack Vue App With Node, Express, and MongoDB

Much of application development, including web applications, has to do with CRUD – creating, reading, updating, and deleting data. Today, we will be building a full stack Vue note-taking application and showing you how to perform the aforementioned processes, using Node.js running the Express.js framework for the backend, and MongoDB to store our data.

Below is a preview of the application we will be building: