How to integrate the Smart Chart component in Vue.js Application

The open-source community offers multiple JavaScript frameworks and libraries. One of the top 3 frameworks liked by the developers is Vue.js which is a progressive framework and offers the benefit of both Angular and React. With the latest release of Web Components now you can easily integrate the Smart HTML components in the Vue project.

In this article, we will take a look at how to integrate the Smart Chart component in Vue application.

Integration:

We need node.js v=> 8 to install the Vue CLI. Check the node version by node –v else you can upgrade the node version with npm install npm@latest –g.

To install Vue CLI,

npm install -g @vue/cli

To create a Vue project using CLI, type below command in Vue CLI.

vue create my-project

This will start the creation of the project, which will then present an option to pick default preset or manually select features. Select the features for the project manually. Once the project is created to run on a server.

npm run serve

Our project will run at localhost:8080.

Folder Structure of Vue Project:

Once the project is created, we will have a project structure as shown below.

You can get the configuration of the package.json file from the source code below. All the required modules are included.

{  
"name": "vue",  
"version": "0.1.0",  
"private": true,  
"scripts": {    
"start": "vue-cli-service serve",    
"build": "vue-cli-service build",    
"lint": "vue-cli-service lint"
  },  
"dependencies": {
"vue": "^2.6.10"
  },
"devDependencies": {    
"@vue/cli-plugin-babel": "^3.0.0-beta.9",    
"@vue/cli-plugin-eslint": "^3.0.0-beta.9",    
"@vue/cli-service": "^3.0.0-beta.9",    
"vue-template-compiler": "^2.5.13"
    },  
"babel": {    
"presets": ["@vue/app"]  },  
"eslintConfig": {    
"root": true,    
"extends": [
"plugin:vue/essential",      
"eslint:recommended"]
    },  
"postcss": { 
"plugins": { "autoprefixer": {} }  
    },  
"browserslist": ["> 1%", "last 2 versions", "not ie<= 8"]
    }

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

Installation of Smart Elements:

You can install the latest version through npm or you can download the smart elements to your project folder and unzip your directory. Open “my-project” folder and run the below command.

npm install @smarthtmlelements/smart-elements    

Adding a Smart Chart Component in the Vue Application:

Before we add the Smart Chart Component in the Vue application, we will first configure the Vue to ignore the custom elements defined outside of Vue in the main.js file. This will allow the Vue to identify these components as custom elements and will avoid throwing the Unknown custom element error or warning. This error occurs when an element is not registered as a global component or any component name is misspelled.

import Vue from'vue'
import App from'./App.vue'
 
Vue.config.productionTip=false
Vue.config.ignoredElements=[
'smart-list-box',
'smart-list-item',
'smart-cards',
'smart-card',
 
]
 
newVue({
render:h=>h(App),
}).$mount('#app')

Now we will import the Smart Elements, to import chart web components we will use the

#vue-js #vue #html #web-development #javascript