Learn free vuejs tutorials

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

July 29, 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....

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

July 28, 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 component, 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 parents components contain initialed with an initial value, Child components use its value as a local value and do the necessary changes....

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

July 28, 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....

VueJs - Input blur event with examples

July 28, 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 Input form Number Validation example

July 28, 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 popup notification tutorial | Sweetalert2 example

July 28, 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 opensource lightweight javascript to create a popup notification in javascript applications....

How to Change default port in vuejs application

July 27, 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 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 8080 port....

How to redirect to page and external url in vuejs

March 27, 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 at the HTML template that will redirect at the server level. Then how do you navigate to the page programmatically?...

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

March 27, 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 Generate Unique Identifier-UUID or GUID with example

March 27, 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 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 textarea binding with examples

March 27, 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 mapped to Vue component instance using v-model directive....

Vuejs Input type url form Validation example

March 27, 2022 ·  3 min read

This short tutorial covers step by step tutorial 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 vuecli tool...