Vue Js 2 Tutorial

Posted on  by admin

What is Vue.js?

In this Vue js 2 tutorial, we will get to know how to create a Calendar Component in the Vue js application.

Even a novice can easily integrate this feature in his Vue js app by following these simple steps and we will be using the special vue-bootstrap-datetimepicker package.

The bootstrap date and time picker not only allows us to integrate the calendar component in our Vue js app but also allows us to pick or select a date and time together.

Hence, it’s not a standard package. So, we can easily manage to create an event, make bookings or do any planning in respect of a future event. In that, this calendar widget helps us a lot.

Step 1- Install Vue CLI + Vue 2 App. Step 2- Install Vue Bootstrap Date Time Picker Package. Step 3- Create And Register Calendar Component.

Step 4- Create Calendar Widget In Vue. Step 5- Start The Application. The very basic step for starting with the implementation is just to install Vue CLI.

Conclusion

We will be creating a new Vue app using the below command:.

To remove the above error for invoking the app, do remember to update the “scripts”: [] array in the package.json file.

Further, we have to install the bootstrap library in Vue.

We will invoke the installation of Vue bootstrap DateTime Picker plugin.

So, we open the terminal and install these packages with the help of the following commands:.

Afterward, we need to register these packages by updating the src/main.js file:.

How To Download File In Vue JS Using Axios

Here, we will create a new component named components/CalendarWidget.vue to handle the vue calendar feature.

Then, we will update src/App.vue file:. The b-calendar directive is required to be added to the vue template. It shows the calendar widget in the Vue app.

It takes the v-model=”” property to add the two-way data binding mechanism whereas the config property allows customization of the calendar component.

Getting Started

Further, we will update the components/CalendarWidget.vue file:. We have to use this npm command in order to start the Vue app:.

Handling User Input

So, friends, we have how to add the simple calendar widget in our Vue app. We can also add the time picker feature in Vue in this manner. This post has been published first on CodingTheSmartWay.com.

Ready for More?

Vue is a progressive JavaScript framework that focuses on building user interfaces. As it only works in the “view layer” it makes no assumption of middleware and backend and therefore can be integrated easily into other projects and libraries.

Vue.js offers a lot of functionality for the view layer and can be used for building powerful single-page webapps. In the following you can find a list of features:.

How To Show Toaster Notification In Vue Js

Reactive Interfaces. Declarative Rendering. Computed Properties. CSS Transitions and Animations. The Vue.js 2 core library is very small in size (only 17 kB).

Declarative Rendering

This ensures that the overhead which is added to your project by using Vue.js is minimal and your website is loading fast. The Vue.js website is available at: https://vuejs.org/.

Conditionals and Loops

There are different ways to include Vue.js in your web project:. Use CDN by including