1. Home
  2. Forum
  3. Vue
  4. error using a vue component

error using a vue component


Good Morning,

The problem is the following: I am using the vue component to edit my columns, but when I check the board it does not generate anything on the screen and it generates the following error in the console:

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

and it looks something like the following image:

This is my code:

      empRiesgo: function () {
        return {
          template: Vue.component('empRiesgo', {
            template: `
                <div align="center" >    
                            <button :id="'target' + indice" name="button" @mouseover="mostrarTooltip(data, indice);" v-on:click="DataIframe(data)"><span :class="data.Columna[0].VC[0]" :style="data.Columna[0].VC[1]"></span></button>                                                                                                      
                        </div>                        
                        `,
            data: function () {
              return {
                data: {},
              };
            },
            computed: {
              indice: function () {
                if (indicecolumn >= ArrayDato.length) {
                  indicecolumn = 0;
                }
                indicecolumn++;
                return indicecolumn;
              },
            },
            methods: {
              DataIframe(data) {
                dialog = true;
                TipoIFrameGlo = 0;
                IdentificacionGlo = data.Columna[2].VC[1];
                NombrePersonaGlo = data.Columna[2].VR[0];
                Contrato_IDGlo = data.Columna[1].VC[2];
                Acivos_IDGlo = data.Columna[1].VC[3];
                TipoActivoGlo = data.Columna[1].VR[5];
              },
              mostrarTooltip(data, indice) {
                var datai =
                  " <div id='tooltipContent' align='center'>  <p><strong>" +
                  data.Columna[1].VC[2] +
                  "</strong>  <strong>" +
                  data.Columna[1].VC[3] +
                  "</strong> </br> " +
                  data.Columna[0].VR[0] +
                  " </p></div>";
                let tooltip = new Tooltip({
                  content: datai,
                });
                tooltip.appendTo("#target" + indice);
              },
            },
          }),
        };
      },


Thank U!


1 Reply
PS Pavithra Subramaniyam Syncfusion Team April 8, 2022 10:47 AM UTC

Hi Bryam,


Thanks for contacting Syncfusion support.


From the shared error message, it seems that the runTimeCompiler should be configured. Please refer to the below reference links for more information


https://stackoverflow.com/questions/57793297/vue-warn-the-runtime-only-build-of-vue-where-the-template-compiler-is-not-avai

https://stackoverflow.com/questions/66393740/what-exactly-is-vues-runtime-only-build-and-how-does-it-differ-from-compiler-bu


If you are still facing the issue, please share the below details that will be helpful for us to provide a better solution as early as possible.


  1. Share the full grid code example
  2. Share the Sample dataSource
  3. Share the Vue and Syncfusion package version
  4. Share the issue reproducible sample if possible


Regards,

Pavithra S


Loader.
Up arrow icon