Learn free vuejs tutorials

How to Change default port in vuejs application

July 25, 2021 ·  2 min read

This blog post cover how to change default port in Vue project, created using vuecli tool. Vue application is created with vue-cli tool using vue create command. By default application created with default package.json scripts 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 web server listens at 8080 port....

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

July 25, 2021 ·  2 min read

In this short tutorial, You will learn about v-on and v-bin directive and shorthand syntax with example v-on directive v-on directive in vuejs add the dynamic behaviour to html templates. v-on is an vuejs directive is binding event handler for listening javascript native events. This will be added as an extra parameter to html tag as seen below Syntax <htmltag v-on:Events:modifier="Eventhandler" ></htmltag> <htmltag @:Events:modifier="Eventhandler" ></htmltag> Events are click event , for example button click or input keypress event...

How to add or remove element from an array in Vuejs Application example

June 12, 2021 ·  1 min read

Adding and delete an element from an array is a normal operatiron by developer. This post talks about how to add and delete an array?...

Vuejs popup notification tutorial | Sweetalert2 example

June 12, 2021 ·  5 min read

In this blog post, We are going to learn How to create a popup in a vuejs application using the sweetalert 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 opensource lightweight javascript to create a popup notification in javascript applications....

Vuejs Generate Unique Identifier-UUID or GUID with example

May 26, 2021 ·  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 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....

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

April 19, 2021 ·  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. New Vuejs applications prototype created using vue-cli, and By default,It generates gitignore files which has 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 gitignore file....

vuejs input textarea binding with examples

February 25, 2021 ·  2 min read

textarea is a input multi line component in HTML. This is used to input forms in web applications to take input from 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 mapped to vue component instance using v-model directive....

How to redirect to page and external url in vuejs

February 24, 2021 ·  2 min read

Page navigation is one of the basic feature of any website from one page to other 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"> This is fixed way of adding the path at html templae that will redirect at server level. Then how do you navigate to page programmatically?...

How to listen props changes in Vuejs| watch function example

February 23, 2021 ·  2 min read

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

Vuejs Input form Number Validation example

February 3, 2021 ·  4 min read

Input form are fundamental blocks of web page.User enter data, browser display errors on validation failures, submit data to server on submitting the form. These forms contains different input control types of accepting strings or numbers. In this post, We are going to learn how to input number validation with accepts only numbers from page in Vuejs Application, It also includes display an error if validation errors exists. In Vuejs, This can be achieved with multiple ways - using keypress keycode, regular expression and npm libraries like vue-numeric...

Vue Data function - Multiple ways to declare

January 31, 2021 ·  3 min read

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

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

January 23, 2021 ·  2 min read

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

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

January 22, 2021 ·  3 min read

Sometimes, you want to hide the div or html element with button click event, Show div with clicking on button again. toggle is an switch which hide/show elements dynamically with truthy value of an attribute In this post, You will learn multiple ways to show/hide div on 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 default template,script and styles sections....

VueJs - Input blur event with examples

January 13, 2021 ·  3 min read

In this tutorial, We are going to learn blur event uses and multiple examples. blur event is an browser native event introduced with javascript language, Every front end framework implemented in the framework itself. Let us learn what is blur event, how this event is implemented in 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 input element lost focus....

Vuejs Input type url form Validation example

January 12, 2021 ·  3 min read

In this short tutorial, It covers step by step tutorial to validate input form type=url in vuejs. URL validation can be done using 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 are sequence of steps to create an application First, Create an Vue application using vuecli tool...

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

January 8, 2021 ·  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 command line interface for creating vuejs application To install npm install -g @vue/cli This installs vue cl in your machine....

How to remove an element from an array in vuejs component

January 1, 2021 ·  3 min read

In this post, Step by step guide for removing an element from an array in Vuejs. Other versions available: ReactJS example There are multiple approaches to delete an item from an array in vuejs or javascript If you are removing an element from array, original array is not mutated and its just return the newly created array. splice method remove object from array splice is an inbuilt method in array, used to remove an element from an array and return new array with removed list....