Hi Cyril,
By default, the runtime compiler
is not included in the Vue build. To include it, add the following code
in resolve.alias configuration,
reference: https://stackoverflow.com/questions/66470249/vue-3-with-vite-rendering-blank-page-when-not-using-app-vue/67354652#67354652
|
[vite.config.js]
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
'@': fileURLToPath(new
URL('./src', import.meta.url))
}
}
})
|
Or, if you want to render the columnTemplate without using
runtimeCompiler, you need to define the Vue component of template column in
separate file instead of same file. Please find the below code example and
attached sample for your reference.
|
[App.vue]
<template>
<ejs-grid :dataSource="data"
:actionFailure="actionFailure">
<e-columns>
<e-column
field="OrderID" width="100" textAlign="Right"></e-column>
<e-column
field="CustomerID" :template="customerIDTemplate"
width="180"></e-column>
---
</e-columns>
</ejs-grid>
</template>
<script>
import
nameTemplate from "./ColumnTemp.vue";
import { createApp } from 'vue'
const app1 = createApp();
// Template declaration from
another vue file
var colVue1 = app1.component("colIDTemplate",
nameTemplate);
export default {
name: 'App',
components: {
'ejs-grid' : GridComponent,
'e-columns' : ColumnsDirective,
'e-column' : ColumnDirective,
},
data() {
return {
data: data,
customerIDTemplate: function () {
return {
template: colVue1};
},
};
},
};
</script>
|
|
[ColumnTemp.vue]
<template>
<div> {{data.OrderID}} - {{data.CustomerID}}
</div>
</template>
<script>
export default {
name: "nameTemplate",
data() {
return {
};
},
};
</script>
|
Regards,
Rajapandiyan S
Attachment:
runtimecompiler_vite_resolved_a7319860.zip
