Vue.js UI Components for jQWidgets

Vue is a progressive framework for building user interfaces. The integration with it is simplified because it is designed to be incrementally adoptable. Web application built with Vue.js and jQWidgets: https://jqwidgets.github.io/vue-grid/
In this tutorial we will demonstrate jQWidgets components ready to use based on Vue.

Prerequisites

Node.js - to verify that you have it installed, run the command node -v in cmd. It will output the current version.

Getting Started

• Step 1 - Create your project folder structure.
• Step 2 - Configurate and install all needed modules.
• Step 3 - Build the Vue.js application project.
• Step 4 - Run the application.

Step 1 - Creating folder structure

We have a base root folder that contains public, src folders, and package.json file. The public folder has "index.html" page which is used for a base. The content is one <div/> which will be used to render the future Vue.js solution. Also, there can be additional references for the purpose of the project.

Step 2 - Configuration and installation

You can get the configuration of the package.json file from as it is in the source code below. There are all needed modules for the tutorial purposes.

After your package.json is ready type npm install in your CLI.

Step 3 - Build the application

Navigate to the public folder and create index.html file. It should be a simple HTML document with one <div/> where data will be rendered using straightforward template syntax.

index.html:

The next step is to navigate to the src folder. In this level folder we will create the main.js file. We will add a simple configuration there and after that would not need to care about it.

main.js:

In the same level folder create the App.vue file, this is the main file for our application. We will continue with this file to create our application. It has the following structure:

Import the jQWidgets component

We want to add <JqxButton/>. For this purpose we should import it in the App.vue file into the <script/> section:

    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

and after that add it to the components member of the Vue class.

    components: {
        // Adding imported widgets here
        JqxButton
    },

The template

The App.vue has a <template> structural tag where we determine the application structure. There we also will set the tags for the new components - <JqxButton/>

Properties

The attributes of the <JqxButton/> component are its properties. Their definition is set in the data member of the Vue class. We should define the properties that we will use in the returned object:

Events & Methods

The events in the Vue are set as an attribute with @ prefix:

            @click="click()"

All events that are bound to one widget are implemented in the methods member of the Vue class.

To use a method of one component we should have its reference. In Vue we refer to the component by special $refs property. Before that we need to add desired name reference to that component:

            <JqxButton ref="button"></JqxButton>

The following approach shows how to use a method:

            this.$refs.button.val('Clicked');

If we want to add additional methods we should also implement them in the methods member.

In case we need to do some precalculation or something else before the components are rendered, we should use the beforeCreate member. It depends on the case.

More details about the Options / Lifecycle Hooks you can find in the official site.

If we have followed all the above steps, our App.vue file should look like this:

App.vue:

Create a component with JSON

We can create the components with another approach. It is suitable when wanting to create one widget into another one. Need to import the component and after that add it to components member like in the previous approach.

In the <template> will add <JqxButton/> with attribute :autoCreate="false".

The next step is to create the component with createComponent method:

    this.$refs.button.createComponent(settings);

We will implement this in the components member of the Vue class with the desired settings.

The final result of the source code of "Create a component with JSON" should look like this:

How to get and set property or method

We can achieve that if we have a reference of the component and refer to it (this.$refs.button). The example below demonstrates how to get and set a property and the relevant approach about a method:

Step 4 - Run the application

We are ready. Now we should navigate to the directory of this application through the CLI and type:

            npm start

We can open the preferred web browser after that in the address bar typing:

            http://localhost:8080/

Final Result: