Posts for Vue

Deven
Deven wrote

Building a Portfolio Website with Vue and Bootstrap

In this tutorial, we will build a Portfolio Website with Vue and Bootstrap. This tutorial is targeted at developers who know the basics of Bootstrap and Vue.js framework but need a practical example to properly grasp the above technologies. If you are an absolute beginner, I would suggest you take some absolute beginner crash courses […]

May 12, 2023 in Tutorials & Vue
Deven
Deven wrote

Mastering MEVN Stack CRUD Operations: A Step-by-Step Guide

In this tutorial, we will create a MEVN stack CRUD application using MongoDB, Express, Vue 3, and Node.js. In our Node.js API, we will be able to perform create, read, update, and delete operations. At the end of the tutorial, readers should be able to create a CRUD app with Node.js, connect the Node.js server […]

May 12, 2023 in Tutorials & Vue
Deven
Deven wrote

Implementing Debounced Input Search in Vue.js

This Vue.js code snippet demonstrates how to implement a debounced search input that triggers an API call. This is a common feature in applications like Gmail and Facebook, where search results are dynamically updated as a user types into a search box. Explanation In this code, the input event is listened to on the input […]

May 11, 2023 in Code Snippets & Vue
Deven
Deven wrote

Fetching and Rendering a List Using a Vue Component

This Vue.js code snippet illustrates how to fetch and render a list of items from a provided URL. This is a common operation in web applications, such as displaying a list of recipes or a to-do list. Code Snippet Explanation In this Vue component, the props option is used to accept a url prop from […]

May 11, 2023 in Code Snippets & Vue
Deven
Deven wrote

Deleting an Item from a List in Vue

This code snippet illustrates how to delete an item from a list in Vue Deleting an item from a list is a common operation in many web applications, particularly in scenarios like removing an item from a shopping cart in e-commerce websites. Code Snippet: Explanation In this code, list is an array of names. Within […]

May 11, 2023 in Code Snippets & Vue
Deven
Deven wrote

Displaying a Loading Indicator during Data Fetch in Vue

This code snippet demonstrates how to display a loading indicator in a Vue application when fetching data. It leverages Vue’s v-if directive to conditionally render a loading spinner based on the state of the data fetch operation. In the snippet below, we have our data property loading which is set to false by default. Before […]

May 11, 2023 in Code Snippets & Vue
Deven
Deven wrote

Detecting User Device Screen Orientation in Vue

This code snippet detects the orientation of a user’s device screen (portrait or landscape) in Vue. It is particularly useful when you want to change the layout or functionality of your web page based on the screen orientation. Code Snippet Explanation: The code adds an event listener for the ‘orientationchange’ event, which is fired when […]

May 11, 2023 in Code Snippets & Vue
Deven
Deven wrote

Detecting User Navigation Away from a Web Page in Vue

This code snippet is used to detect when a user navigates away from a web page In Vue. It’s useful when you want to pause animations, videos, or any other activities that shouldn’t continue when the user isn’t actively viewing the page. Code Snippet: Explanation: The code listens for the ‘visibilitychange’ event, which is fired […]

May 11, 2023 in Code Snippets & Vue
Deven
Deven wrote

Learn How to Mock API with Vue and MirageJS

In this tutorial, you will learn how to Mock API with Vue and MirageJS. Single-page applications (SPAs) continue to gain more and more popularity every day. As the complexity of these SPAs increases, the need for dynamic/real-time data increases as well. APIs provide a way to bridge the gap between the SPA and the backend. […]

May 9, 2023 in Tutorials & Vue
Deven
Deven wrote

Building an AI Chatbot with Vue, Node, and OpenAI

In this article, we will be setting up a new Vue.js and Node.js project to create an AI chatbot using OpenAI’s ChatGPT API. The tutorial will guide you through creating a frontend using Vue.js, and a backend using Node.js and the OpenAI API. We will be using the OpenAI ChatGPT API, which allows developers to […]

April 16, 2023 in Tutorials & Videos & Vue
Deven
Deven wrote

Build a Drawing App with Vue 3 and HTML5 Canvas

Dev Bytes – This tutorial demonstrates how to create a simple drawing app using Vue.js and HTML5 Canvas. The final result is a basic but functional drawing app that showcases the power of combining Vue and HTML5 Canvas. In this tutorial, we will be building a simple drawing app with Vue 3 and Html5 Canvas. HTML’s <canvas> […]

April 15, 2023 in Tutorials & Videos & Vue
Deven
Deven wrote

Build a server monitoring app with Vue and Node

In this tutorial, we will learn how to Build a server monitoring app with Vue and node, where we will talk about how we can use Vue.js, Node.js, Express.js, and, Socket.io together to create a powerful web application. Steps to build a server monitoring app with Vue and node Step 1 – Set up the backend […]

February 19, 2023 in Dev Bytes & Node & Tutorials & Vue