How to connect Vue.js to VtigerCRM and create the first widget

Vue.js is a progressive JavaScript framework that I have been working with for many years. After working with the big three - React, Vue and Angular, Vue quickly became my primary tool for building many applications. Very often I receive projects from clients related to adding interactivity to VtigerCRM. The main problem I faced and heard about from many of my colleagues was the lack of additional material on how to connect Vue.js to VtigerCRM. This is why I decided to record a video tutorial, as I strongly believe that Vue is ready to go and can be used successfully in VtigerCRM.

In this video, we will install Vue.js on VtigerCRM and try to create a custom widget that will display a list of recent leads and allow you to quickly filter them by user and industry. And all this will be implemented using Vue.js.

Important point: Using Vue.js in this video assumes that you must have Node.js installed. If you don't have it yet, we recommend installing it before watching the video.

In addition to the video instructions, I provide a text version of the instructions for installing Vue.js

To set up a project in the VtigerCRM folder, you first need to install vue-cli globally. If you haven't already, run the command:

npm install -g @vue/cli@next

To create our project, do:

vue create vue

Next it will ask you to choose between these default presets:

• Default Vue 2

• Default Vue 3

• Manually Select Features

Select the Manually Select Features option (using arrows up/down) and hit enter. Next, the system will ask you to select the options that you need to install. This is optional, but the main thing for us is to install Vuex.

Next, the system will ask which version of Vue3 we will install. I recommend installing version 3.

You will then be asked a series of questions. We will list them below with variants of our answers:

Use class-style component syntax? N (NOTE: we will be using the Vue Composition API

style in this book, but we will give an example on how to use the class-style syntax as well

in one of the advanced chapters)

? Use class-style component syntax? (y/N) N

Where do you prefer placing config … ? In dedicated config files

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

> In dedicated config files

In package.json

At the end, you will be prompted to save your settings. You can answer "No".

Vue-cli will then create a project, install all dependencies, create config files.

After that, I recommend installing the cross-env package:

npm install cross-env --save-dev

cross-env allows to set environment variables across different operating systems in the same

way.

After that, you can assume that Vue.js has been successfully installed. Now you can try to compile js files and they can be connected to VtigerCRM.

And, of course, a detailed video instruction is attached below.