We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Unable to access grid instance and load custom template - vue3

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

3 Replies

RS Rajapandiyan Settu Syncfusion Team March 14, 2023 01:15 PM UTC

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


CO Cyril Ovely March 17, 2023 10:48 AM UTC

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


RS Rajapandiyan Settu Syncfusion Team March 20, 2023 02:48 PM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon