Can i use smart UI without using single file components?

[dusrkdldlr]

hello! I don’t want use single file components.
so I use app.component. this is my code
<div id=”smart-grid-test”>
smartGrid
<test-grid-component>
</test-grid-component>
</div>
<script type=”module”>
import ‘/resources/js/smart/source/modules/smart.grid.js’
let smartGrid = Vue.createApp({});
smartGrid.component(‘test-grid-component’, {
tempalte:<smart-grid id="grid" v-pre></smart-grid>,
mounted: function() {
window.Smart(
“#grid”, class {
get properties() {
return {
columns: [
{ label: ‘First Name’, dataField: ‘firstName’ },
{ label: ‘Last Name’, dataField: ‘lastName’ },
{ label: ‘Product’, dataField: ‘productName’ }
],
dataSource: new window.Smart.DataAdapter(
{
dataSource: [
{ “firstName”: “Beate”, “lastName”: “Wilson”, “productName”: “Caramel Latte”},
{ “firstName”: “Ian”, “lastName”: “Nodier”, “productName”: “Caramel Latte”},
{ “firstName”: “Petra”, “lastName”: “Vileid”, “productName”: “Green Tea”},
{ “firstName”: “Mayumi”, “lastName”: “Ohno”, “productName”: “Caramel Latte”},
{ “firstName”: “Mayumi”, “lastName”: “Saylor”, “productName”: “Espresso con Panna”},
{ “firstName”: “Regina”, “lastName”: “Fuller”, “productName”: “Caffe Americano” },
{ “firstName”: “Regina”, “lastName”: “Burke”, “productName”: “Caramel Latte”},
{ “firstName”: “Andrew”, “lastName”: “Petersen”, “productName”: “Caffe Americano”},
{ “firstName”: “Martin”, “lastName”: “Ohno”, “productName”: “Espresso con Panna”},
{ “firstName”: “Beate”, “lastName”: “Devling”, “productName”: “Green Tea”},
{ “firstName”: “Sven”, “lastName”: “Devling”, “productName”: “Espresso Truffle”},
{ “firstName”: “Petra”, “lastName”: “Burke”, “productName”: “Peppermint Mocha Twist”},
{ “firstName”: “Marco”, “lastName”: “Johnes”, “productName”: “Caffe Mocha”}
],
dataFields:
[
‘firstName: string’,
‘lastName: string’,
‘productName: string’
]
})
}
}
}
);
}
})//component
smartGrid.config.isCustomElement = tag => tag.startsWith(‘smart-‘);
smartGrid.mount(‘#smart-grid-test’);
</script>
<style>
smart-grid {
width: 100%;
height: auto;
}
</style>
The result is nothing on the page.
this is console warn “[Vue warn]: Component is missing template or render function”
please help me. what can I do?

[dusrkdldlr]

oh, sorry ..
there was a typo.. haha
it work!!

[admin]

Hi,
In order to use Smart.Grid with Vue, please refer to https://www.htmlelements.com/docs/grid/#vue
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts