Vue Vite with jQWidgets

This tutorial will show you how to use Vite along with the Vue Components by jQWidgets.
Please, follow the instructions below:

npm create vite@latest

Then choose a project name eg. "my project", choose Vue as a framework. Navigate to the project you just created.

cd my-project

npm install
npm install jqwidgets-scripts
npm run dev
		

Now open components/HelloWorld.vue and replace it with

<template>  
<div>  
	<div>The value is: {{ country }}</div><br />  
		<JqxInput v-model="country" :width="200" :height="25" :source="countries"></jqxInput>  
	</div>  
</template>  
<script>  
import { ref, onMounted } from 'vue'  
import JqxInput from 'jqwidgets-scripts/jqwidgets-vue3/vue_jqxinput.vue';  
export default {  
	components: {  
		JqxInput  
	},  
	setup(props, context) {  
		const country = ref('Hong Kong');  
		const countries = ['Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Antarctica', 'Antigua and Barbuda', 'Argentina', 
		'Armenia', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 
		'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', 'Botswana', 'Brazil', 'Brunei', 'Bulgaria', 'Burkina Faso', 
		'Burma', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Central African Republic', 'Chad', 'Chile', 'China', 
		'Colombia', 'Comoros', 'Congo, Democratic Republic', 'Congo, Republic of the', 'Costa Rica', 'Cote d`Ivoire', 'Croatia', 'Cuba', 
		'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic', 'East Timor', 'Ecuador', 'Egypt',
		'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Fiji', 'Finland', 'France', 'Gabon', 'Gambia', 
		'Georgia', 'Germany', 'Ghana', 'Greece', 'Greenland', 'Grenada', 'Guatemala', 'Guinea', 'Guinea-Bissau', 'Guyana', 
		'Haiti', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Israel', 
		'Italy', 'Jamaica', 'Japan', 'Jordan', 'Kazakhstan', 'Kenya', 'Kiribati', 'Korea, North', 'Korea, South', 'Kuwait',
		'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg',
		'Macedonia', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Mauritania', 'Mauritius',
		'Mexico', 'Micronesia', 'Moldova', 'Mongolia', 'Morocco', 'Monaco', 'Mozambique', 'Namibia', 'Nauru', 'Nepal', 'Netherlands',
		'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Norway', 'Oman', 'Pakistan', 'Panama', 'Papua New Guinea', 'Paraguay',
		'Peru', 'Philippines', 'Poland', 'Portugal', 'Qatar', 'Romania', 'Russia', 'Rwanda', 'Samoa', 'San Marino', ' Sao Tome',
		'Saudi Arabia', 'Senegal', 'Serbia and Montenegro', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 
		'Solomon Islands', 'Somalia', 'South Africa', 'Spain', 'Sri Lanka', 'Sudan', 'Suriname', 'Swaziland', 'Sweden', 'Switzerland', 
		'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', 'Togo', 'Tonga', 'Trinidad and Tobago', 'Tunisia', 'Turkey', 
		'Turkmenistan', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'Uruguay', 'Uzbekistan',
		'Vanuatu', 'Venezuela', 'Vietnam', 'Yemen', 'Zambia', 'Zimbabwe'];  
		onMounted(() => {  
		});  
		return {  
		 country,  
		 countries  
		}  
	}  
}  
</script>  
<style scoped>  
</style>
 
		

After that, open the index.html file and add a reference to our theme files.

<link rel="stylesheet" href="node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.base.css" type="text/css" />

The result is:

Grid

Let's take a look how to use the Grid with Vite and Vue3

<template>  
<div>  
		<JqxGrid :theme="'fluent'" :source="source" :columns="columns" :columngroups="columnGroups"></JqxGrid>  	
	</div>  
</template>  
<script>  
import { ref, onMounted } from 'vue'  
import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue3/vue_jqxgrid.vue';  
export default {  
	components: {  
		JqxGrid  
	},  
	setup(props, context) {  
		  const columns = [
				{text: 'Id', datafield: 'id', columngroup: 'Details'},
				{text: 'Name', datafield: 'name', columngroup: 'Details'}
		  ];
		 
		  const source = [
			  {id: 1, name: 'Hydrogen'},
			  {id: 2, name: 'Helium'},
			  {id: 3, name: 'Lithium'},
			  {id: 4, name: 'Beryllium'},
			  {id: 5, name: 'Boron'},
			  {id: 6, name: 'Carbon'},
			  {id: 7, name: 'Nitrogen'},
			  {id: 8, name: 'Oxygen'},
			  {id: 9, name: 'Fluorine'},
			  {id: 10, name: 'Neon'},
			  {id: 11, name: 'Sodium'},
			  {id: 12, name: 'Magnesium'},
			  {id: 13, name: 'Aluminum'},
			  {id: 14, name: 'Silicon'},
			  {id: 15, name: 'Phosphorus'},
			  {id: 16, name: 'Sulfur'},
			  {id: 17, name: 'Chlorine'},
			  {id: 18, name: 'Argon'},
			  {id: 19, name: 'Potassium'},
			  {id: 20, name: 'Calcium'}
			];

		const columnGroups = [
			{ text: 'Details', align: 'center', name: 'Details' }
		]
		onMounted(() => {  
		});  
		return {  
		 columnGroups,
		 source,
		 columns
		}  
	}  
}  
</script>  
<style scoped>  
</style>
		

After that, open the index.html file and add a reference to our theme files.

<link rel="stylesheet" href="node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.fluent.css" type="text/css" />

The result is: