Unable to access grid instance and load custom template - vue3

[Cyril Ovely]

Hi Team, 

I am facing issues with the grid.  I have followed the documentation to create the inline template. That template is not working with the grid, and another difficulty is accessing the variable from the parent method.

Added working sample below.

Regards,
Cyril Ovely

Attachment: Sample_bf708684.zip

[Rajapandiyan Settu]

Hi Cyril,

Thanks for contacting Syncfusion support.

We have run the provided sample and replicated the issue from our side. It is truly related to the template compiler.

Please find the below links to resolve this.

https://github.com/fengyuanchen/vue-feather/issues/8

https://stackoverflow.com/questions/47332728/you-are-using-the-runtime-only-build-of-vue-where-the-template-compiler-is-not-a 

https://medium.com/@stefanledin/solve-the-you-are-using-the-runtime-only-build-of-vue-error-e675031f2c50

 

[package.json]

  "devDependencies": {

    "@babel/core": "^7.12.16",

    "@babel/eslint-parser": "^7.12.16",

    "@vue/cli-plugin-babel": "~5.0.0",

    "@vue/cli-plugin-eslint": "~5.0.0",

    "@vue/compiler-sfc": "^3.0.0",

    "@vue/cli-service": "~5.0.0",

    "eslint": "^7.32.0",

    "eslint-plugin-vue": "^8.0.3"

  },

 

 

[vue.config.js]

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

  runtimeCompiler: true,

  transpileDependencies: true

})

 

 

Regards, 

Rajapandiyan S

Attachment: Sample_bf708684_resolved_a5c0e1d1.zip

[Cyril Ovely]

Hi Rajapandiyan,

I am not able to render the column template with Vite compiler. Can you let me know how we can enable it in Vue3 + Vite project
I have added a sample project below.

Regards,
Cyril Ovely

Attachment: runtimecompiler_vite_8aaec84c.zip

[Rajapandiyan Settu]

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