Learn free vuejs tutorials

Best 3 ways to remove an element from an array in vuejs component

November 8, 2022 ·  3 min read

This post, Step by step guide on How to remove an element from an array in Vuejs. Other versions available: ReactJS Remove element from array example There are multiple approaches to deleting an item from an array in vuejs or javascript. If you are removing an element from an array, the original array is not mutated and it just returns the newly created array....

How to Change default port in vuejs application

October 30, 2022 ·  2 min read

This tutorial covers how to change the default port in the Vue project, created using the Vue CLI tool. What is the default port of vuejs? The vue application is created with the vue-cli tool using the vue create command. By default applications created with default, package.json scripts are as follows "scripts": { "serve": "vue-cli-service serve", "start": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" } When you run npm run serve or npm run start it starts the webserver listens at the 8080 port....

How to get Current date, time timestamp in Vuejs with example

October 30, 2022 ·  2 min read

Date and time values are specific to the machine that is running. First, the client side is linked to the current machine browser, Another is the server side where the backend machine is running. In my previous post, You learned current timestamp in [javascript] (/javascript-current-epoc-timestamp) and ReactJS. It is very simple in the Vuejs Application If you are already aware of getting a current date in JavaScript. Javascript provides a Date object and holds date, time, and timezone information....

How to listen to props changes in Vuejs| watch function example

October 30, 2022 ·  2 min read

This post is an example of how to listen to prop changes of a component in Vuejs. Vuejs Listen and watch prop changes Props in vuejs are used to pass values from parent to child components, also called one-way binding by default. Sometimes we want to watch props changes to know what was changed and its previous value. Props in parent components contain initialed with an initial value, Child components use its value as a local value and do the necessary changes....

How to redirect to page and external url in vuejs

October 30, 2022 ·  2 min read

Page navigation is one of the basic features of any website from one page to another page. In normal pages, Anchor links are used to navigate from one link to another link. <a href="cloudhadoop.com/about">About</a> The same can be replaced with binding in vuejs <a :href="cloudhadoop.com/about"> or <a v-bind:href="cloudhadoop.com/about"> It is a fixed way of adding the path to the HTML template that will redirect at the server level. Then how do you navigate to the page programmatically?...

How to show/hide div on button click in Vuejs| toggle

October 30, 2022 ·  3 min read

Sometimes, you want to hide the div or HTML element with the button click event, Show the div by clicking on the button again. toggle is a switch that hides/shows elements dynamically with the truthy value of an attribute In this post, You will learn multiple ways to show/hide div by clicking a button. How to Hide/show div on click button using v-if and v-else Directive v-show directive :class attribute First, create a component with the default template, script, and style sections....

Vue Data function - Multiple ways to declare

October 30, 2022 ·  3 min read

Each component has the data function methods as part of the declaration. data is a function in Vue that returns an object. Why does data have to declare in a component? Each component has some data to show in the browser, so the data function code returns the data. this will be accessed by Component methods globally. Does the data function hold API logic to retrieve from the Database? No, data fetching logic should be handled in the method section of the component....

VueJs - How to add google fonts library with step by step

October 30, 2022 ·  3 min read

In this post, How to add google fonts library in Vuejs application with example. It includes *multiple approaches to integrate google font Oswald into vuejs projects. Other versions available: Google fonts in Angular ReactJS Integrate google fonts How to create a Vuejs application? First, Please make sure that vue cli is installed. Vue CLI is s command-line interface for creating a vuejs application To install npm install -g @vue/cli This installs vue cl in your machine....

VueJs - Input blur event with examples

October 30, 2022 ·  3 min read

In this tutorial, We are going to learn blur event uses and multiple examples. blur event is a browser native event introduced with javascript language. Every front-end framework is implemented in the framework itself. Let us learn what is blur event, how this event is implemented in vuejs applications. Other versions available: Angular blur event example React onBlur event guide example Blur event handler in vuejs application BLur event is fired when the input element lost focus....

Vuejs Generate Unique Identifier-UUID or GUID with example

October 30, 2022 ·  2 min read

In this blog post, We are going to learn how to generate UUID or GUID in the vuejs application with examples. You can check my previous posts guide to GUID, UUID, UDID in javascript. how to generate GUID in java React GUID generate Angular Guid generate Vuejs Unique Identifier introduction Unique Identifier Generation is needed in any application of every language. This can be used in the Database as primary keys like id in MongoDB in backend applications or you can store session-id in front-end MVC applications like Angular or vueJS....

Vuejs Input form Number Validation example

October 30, 2022 ·  4 min read

Input forms are fundamental blocks of the web page. The user enters data, the browser displays errors on validation failures, and the form submits to the server. These forms contain different input control types of accepting strings or numbers. In this post, We learn how to input number validation with accepts only numbers from the page in the Vuejs Application. It also includes displaying an error if validation errors exist....

vuejs input Textarea binding with examples

October 30, 2022 ·  2 min read

textarea is an input multi-line component in HTML. It is used to input forms in web applications to take input from a user. This can be created in HTML as follows <textarea placeholder="Please enter comments"></textarea> In this article, How to implement textarea two input binding with v-model and input binding, and text area example usage. Simple TextArea example vuejs Like any input form control, Textarea values are mapped to the Vue component instance using the v-model directive....

Vuejs Input type url form Validation example

October 30, 2022 ·  3 min read

This short tutorial covers step by step tutorials to validate input form type=url in vuejs. URL validation can be done using a regular expression pattern. You can see the full code on Github Other versions available: Angular url form validation ReactJS Input type url validation VueJS new application creation Here is a sequence of steps to create an application First, Create a Vue application using the vuecli tool...

Vuejs popup notification tutorial | Sweetalert2 example

October 30, 2022 ·  5 min read

In this blog post, We are going to learn How to create a popup in a vuejs application using the sweet alert framework I already blogged about Sweetalert tutorials with examples and Alert Notifications with Angular here as follows VueJS Alert Component Alert is a simple popup dialog box to give useful information to the user Vuejs is a popular progressive javascript framework for creating single-page applications. Sweetalert is a vanilla open-source lightweight javascript to create a popup notification in javascript applications....

Vuejs V-on and v-bind directives examples| Shorthand syntax

October 30, 2022 ·  2 min read

In this short tutorial, You will learn about v-on and v-bin directives and shorthand syntax with examples. v-on directive v-on directive in vuejs adds dynamic behavior to HTML templates. v-on is a vuejs directive that is the binding event handler for listening to javascript native events. It adds an extra parameter to the HTML tag as seen below. Syntax <htmltag v-on:Events:modifier="Eventhandler" ></htmltag> <htmltag @:Events:modifier="Eventhandler" ></htmltag> Events are click events, button clicks or input keypress events are examples....

what folder/files are ignored for git commit | gitignore vue

October 30, 2022 ·  2 min read

The path of files or directories in your application are listed in the gitignore file. These files are not committed during git push or commit operations. A New Vuejs applications prototype was created using Vue-CLI, and By default, It generates gitignore files which have the following content. .DS_Store node_modules/ dist/ npm-debug.log If you open your project with Visual Studio Code, it creates some caching files. So you need to add those in the gitignore file....