Learn free vuejs tutorials

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

January 1, 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 form Number Validation example

January 1, 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 type url form Validation example

January 1, 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...

How to Change default port in vuejs application

January 1, 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 vue-cli tool using 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 get Current date,time timestamp in Vuejs with example

January 1, 2022 ·  2 min read

Date and time values are specific to the 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. It is very simple in the Vuejs Application If you are already aware of getting a current date in JavaScript. Javascript provides Date object, holds date, time, and timezone information. It provides various methods to provide the current date information....

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

January 1, 2022 ·  2 min read

This post is an example of how to listen to 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. 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 redirect to page and external url in vuejs

January 1, 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?...

How to remove an element from an array in vuejs component

January 1, 2022 ·  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 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. splice method removes the object from an array splice is an inbuilt method in an array, used to remove an element from an array and return a new array with the removed list....

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

January 1, 2022 ·  3 min read

Sometimes, you want to hide the div or HTML element with the button click event, Show div by clicking on the button again. toggle is a switch that hides/show 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 styles sections....

Vue Data function - Multiple ways to declare

January 1, 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 - Input blur event with examples

January 1, 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 is fired when the input element lost focus....

Vuejs Generate Unique Identifier-UUID or GUID with example

January 1, 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

January 1, 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 popup notification tutorial | Sweetalert2 example

January 1, 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....

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

January 1, 2022 ·  2 min read

In this short tutorial, You will learn about v-on and v-bin directive and shorthand syntax with examples. v-on directive v-on directive in vuejs adds the 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 click or input keypress events are examples....

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

January 1, 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. New Vuejs applications prototype 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....