Nothing come out from browser

[Lim Wee Beng]

Hi.

Below is my code, at App.vue.

When I run npm run serve, it shows nothing at the browser. 

Uncaught TypeError: Object(...) is not a function

    at eval (button.component.js?b947:102)

    at eval (button.component.js?b947:109)

    at Module.../../../../node_modules/@syncfusion/ej2-vue-buttons/src/button/button.component.js (chunk-vendors.js:635)

<template>

  <div id="app">

    <img alt="Vue logo" src="./assets/logo.png" />

    <HelloWorld msg="Welcome to Your Vue.js App" />

    <ejs-button :content="name"></ejs-button>

  </div>

</template>

<script>

import Vue from "vue";

import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";

Vue.use(ButtonPlugin);

export default {

  name: "app",

  data() {

    return {

      name: "Button",

    };

  },

};

</script>

<style>

#app {

  font-family: "Avenir", Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

Attachment: Untitled_482b7f59.zip

[Gayathri KarunaiAnandam]

Hi Lim, 

We have checked your reported query. We are unable to replicate the reported issue in our end. We have prepared a sample based on your suggestion. Please check the below sample. 

<template> 

  <div id="app"> 

    <img alt="Vue logo" src="./assets/logo.png" /> 

    <ejs-button :content="name"></ejs-button> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons"; 

Vue.use(ButtonPlugin); 

export default { 

  name: "app", 

  data() { 

    return { 

      name: "Button", 

    }; 

  }, 

}; 

</script> 

 

 

<style> 

@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; 

</style> 

 

<style> 

#app { 

  font-family: "Avenir", Helvetica, Arial, sans-serif; 

  -webkit-font-smoothing: antialiased; 

  -moz-osx-font-smoothing: grayscale; 

  text-align: center; 

  color: #2c3e50; 

  margin-top: 60px; 

} 

</style> 

For your reference, we have prepared a sample based on your suggestion. Please check the sample. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/clientapp-1143255090 

Screenshot: https://www.syncfusion.com/downloads/support/directtrac/general/ze/srnshot-1693280691 

Documentation:  

https://ej2.syncfusion.com/vue/documentation/button/getting-started/ 

https://ej2.syncfusion.com/vue/documentation/getting-started/vue3-tutorial/ 

If you are still facing the issue, kindly share the below details. 

·        If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample  

·        If possible, please share the video demonstration of the issue. 

·        Please share the Syncfusion version you are using. 

Please provide the above requested information, based on that we will check and provide you a better solution quickly. 

Regards, 

Gayathri K 

[Lim Wee Beng]

Thanks.

[Gayathri KarunaiAnandam]

Hi Lim, 

You are welcome. 

We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 

Regards, 

Gayathri K