Vue 3, Vite and jqxGrid

This tutorial will present you the right way to use Vite together with the Vue Parts by jQWidgets.
Please, observe the directions under:

npm create vite@newest

Then select a undertaking identify eg. “my undertaking”, select Vue as a framework. Navigate to the undertaking you simply created.

cd my-project

npm set up
npm set up jqwidgets-scripts
npm run dev
		

Now open parts/HelloWorld.vue and exchange it with

<template>  
<div>  
		<JqxGrid :theme="'fluent'" :supply="supply" :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 {  
	parts: {  
		JqxGrid  
	},  
	setup(props, context) {  
		  const columns = [
				{text: 'Id', datafield: 'id', columngroup: 'Details'},
				{text: 'Name', datafield: 'name', columngroup: 'Details'}
		  ];
		 
		  const supply = [
			  {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,
		 supply,
		 columns
		}  
	}  
}  
</script>  
<type scoped>  
</type>
		

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

<hyperlink rel="stylesheet" href="https://www.jqwidgets.com/vue-3-vite-and-jqxgrid/node_modules/jqwidgets-scripts/jqwidgets/kinds/jqx.base.css" kind="textual content/css" />
<hyperlink rel="stylesheet" href="node_modules/jqwidgets-scripts/jqwidgets/kinds/jqx.fluent.css" kind="textual content/css" />

The result’s: