Not able to add a simple button

[Sreehari]

Dear Team,

I am trying out the vue 3 components and for the same i created a page with just one button. Copied from your sample

<template>

<div id="app">

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

<h1>{{ msg }}</h1>

<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 {

  msg: 'Hi EJ2 Components for Vue',

  name: 'Button'

}

  }

}

</script>

How ever while running the same i am getting the following error

App.vue?3dfd:12 Uncaught TypeError: Cannot read properties of undefined (reading 'use')

    at eval (App.vue?3dfd:12)

    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/App.vue?vue&type=script&lang=js (app.js:938)

    at __webpack_require__ (app.js:849)

    at fn (app.js:151)

    at eval (App.vue?224d:1)

    at Module../src/App.vue?vue&type=script&lang=js (app.js:985)

    at __webpack_require__ (app.js:849)

    at fn (app.js:151)

    at eval (App.vue?dfb6:1)

    at Module../src/App.vue (app.js:973)

Below is my package.json

"dependencies": {

    "@syncfusion/ej2-vue-buttons": "^19.2.60",

    "core-js": "^3.6.5",

    "vue": "^3.0.0",

    "vue-class-component": "^8.0.0-rc.1"

  },

  "devDependencies": {

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

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

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

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

    "babel-eslint": "^10.1.0",

    "eslint": "^6.7.2",

    "eslint-plugin-vue": "^7.0.0"

  }

[Gayathri KarunaiAnandam]

Hi Sreehari, 

We have checked your reported query. We can create Syncfusion Button component in vue 3 platform. Please check the below code snippet. 

App.vue 

<template> 

<ejs-button>Button</ejs-button> 

</template> 

<script> 

import { ButtonComponent } from '@syncfusion/ej2-vue-buttons'; 

import { enableRipple } from '@syncfusion/ej2-base'; 

enableRipple(true); 

export default {  

  name:'Button', 

  components: { 

     "ejs-button": ButtonComponent, 

  },} 

</script> 

<style> 

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

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

button { 

  margin: 25px 5px 20px 20px; 

} 

</style> 

For your reference, we have prepared a sample based on this. Please check the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/168686/ze/quickstart-1913119560 

For your reference , please check the below link. 

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

Please check the above links and get back to us, if you need further assistance. 

Regards, 

Gayathri K