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

Using the PDF Embed API With Vue.js

I've recently become acquainted with Adobe's PDF Embed API. As you can probably guess by the name, it's a library for embedded PDFs on a web page. It is not just a simple viewer; it has APIs for interacting with the PDF and excellent mobile support. This is a part of the Document Cloud service that provides other PDF tools (extraction, conversion, and so forth). I've been playing with the viewer a bit and wanted to see what Vue.js integration would look like. Here's my solution, but note that I'm still learning about the product, so it could probably be done better.

First off, to use the API, you need a key. Clicking the link from the webpage will walk you through generating a key. One important note on this, though. You have to lock down your key to a domain, and that domain cannot be changed either. Also, you can only specify one domain. So, if you want your domain and localhost, create two projects, generate two keys, and set them as environment variables for your development and production environment. I did my testing on CodePen and had to use this domain: cdpn.io

Posted on

Vuetensils 0.10: Vue 3, Vite, Better Forms, and More

I’ve recently published the latest version of Vuetensils and wanted to take some time to share some of the features I’m most excited about.

Vue 3 and Vite

Great news for anyone working with new or newly upgraded projects: Vuetensils now works with Vue 3. We’re leveraging vue-demi to do a little bit of magic to check whether the current version is Vue 2 or 3. 

Posted on

Dynamic Styling in Vue.js

When I started using Vue.js as a front-end framework I immediately enjoyed the easy way I can set up and manage my components. Using single file components let me focus on all aspects regarding the way I build them: I simply need to put 3 tags inside a .vue file and I can start shaping both the visual aspect and all the logic behind the component itself. Talking about styling, the first thing that the official doc tells you is how to style a component: simply insert a style tag (usually at the end of the file) and you're done. 

But when you move on and start to build complex interfaces, you immediately need to perform styling that goes beyond the simple composition of CSS classes. So, during my journey, I discovered several ways to perform dynamic styling, and this article aims to be a short reference for people that come up at first with this need.
In order to show you the different techniques, I'll use a super-simple button component that must use a specific background color value if a boolean prop is true (ok maybe is too simple, but so you'll grasp the concepts quickly).
Let's start with the component code:

Posted on

Use Socket.IO With Nuxt.js/Vue.js

For one of my recent Nuxt.js projects, I had to use Socket.IO to send the data from the server to the users in real-time without reloading the whole page. Initially, I was using Vue.js, but then the client insisted on implementing Nuxt.js for the server-side rendering purpose.

First, I used Axios as a middleware to send and receive HTTP requests. Axios is a great library to send and receive data without loading the whole page. It works great with Vue.js and Node.js. But the problem with Axios is that it only sends the response once with res.send or res.end method. If you try to send two or more times with these methods, then the app crashes.

Posted on

Vue.js vs React: Which One to Choose

Vue.js and React have lots of similar features. Although React is a library, it suits building the view of the single-page application the same efficiently as Vue.js.

Common Features In Vue.js and React:

  • They enable writing front-end with JavaScript and utilize the virtual DOM for fast data rendering.
  • Components have the same single file structure and support JSX.
  • Both systems allow uni- and bi-directional data flow for the components.

Let's study the component build principles in detail. At the end of our journey, we will uncover the key difference between React and Vue.js.

Posted on

AngularJS Vs. ReactJS Vs. VueJS: A Detailed Comparison

Choosing the best technology for web development is a fundamental pillar for every business. But the process becomes sucking when you have to choose between the leading technologies like AngularJS, React JS, and Vue.js. All three differ only by their release date and their features.

From startups to ISVs, all are confused about choosing the right technology for their project. Be it Angular, React, or Vue.js, all have created a lot of buzz in the market and enjoy excellent community support. 

Posted on

Develop a Scraper With Node.js, Socket.IO, and Vue.js/Nuxt.js

The incredible amount of data available publicly on the internet for any industry can be useful for market research. You can use this data in machine learning/big data to train your model with tens of thousands of entries.

Here, in this article, I’m going to discuss the development of a web scraper with Node.js, Cheerio.js, and send back-end data to Vue.js in the front-end. Along with that, I’m going to use a simple crawler Node.js package.

Posted on

Split Testing With Netlify

Split testing is a feature you aren’t using enough. It’s a great way to test changes with your visitors without minimizing risk. In this tutorial, we’ll learn what split testing is, why you need it, and how to set it up with Netlify.

What is Split Testing?

Split testing is the idea of creating another copy of your website that you can send users to, so you can test new features. Let’s say you have a new design you want to try out. Rather than push that new design to production where everyone can see it, you can test it with a few people.

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

Top 5 Gantt Chart Libraries for Vue.js

Nowadays, the software market offers a variety of ready-made planning and scheduling tools for projects of any complexity level, but these solutions may include excessive functionalities or lack some necessary features. That is why many companies prefer to invest in the development of web-based custom solutions. And it is not surprising, as there is a large and constantly growing number of advanced JavaScript libraries and frameworks allowing web developers to build a feature-packed app that will precisely cover all the needs of any given project. 

In this article, we will consider the top 5 Gantt libraries for Vue-based applications. A Gantt chart is arguably one of the most popular tools for managing projects in various industries, while Vue.js is a lightweight and easy-to-use JavaScript framework that has gained remarkable popularity since its launch in 2014. During the review of selected Gantt libraries, we will pay special attention to the following aspects: key functional capabilities, documentation completeness, availability of demo materials, and license options.

Posted on

Validation Forms in Vue.js Apps Using Vuelidate library

Hello! One of the most common tasks in software development is input validation. Any app has different forms that submit some data, and we want to check numerous conditions: that fields are not empty and that they have a proper format (like emails), length, and so on. Yes, we can do it manually, but this is not the best path. It is better to use a specific validation library. For Vue.js apps, the popular choice is Vueildate. In this post, we will see how to install it to your Vue apps, how to use it, and observe the most important built-in validators.

What Is Vuelidate?

Let have a simple example. You’re building a signup form. You want to check that user provides a correct input, like:

Posted on

The Import Statement With an Emscripten-Generated WebAssembly Module in Vue.js

In my liveBook for WebAssembly in Action, I was recently asked how to use an Emscripten-generated module in Vue.js. In the book, I showed examples using standard JavaScript but didn’t dig into JavaScript frameworks, so I thought this would be an interesting question to look into, especially because I’ve never used Vue.js before.

This article will walk you through the solution that I found. The first thing that’s needed is a WebAssembly module.

Posted on

Extending Vue.js Components

Do you have components in your Vue app that share similar options, or even template markup?

It'd be a good idea to create a base component with the common options and markup, and then extend the base component to create sub components. Such an architecture would help you apply the DRY principle in your code (Don't Repeat Yourself) which can make your code more readable and reduce the possibility of bugs.