Toolbar Not Working in Vue 3

[Rama Ibrahim]

I followed the instructions on the Vue 3 Document Editor tutorial as exactly as possible but I can't make the toolbar showing up.

My code:

<template>

<ejs-documenteditorcontainer height="600px" :serviceUrl="serviceUrl" :enableToolbar='true'>

ejs-documenteditorcontainer>

</template>

<script>

import { defineComponent } from 'vue';

import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';

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

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

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

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

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

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

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

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

import '@syncfusion/ej2-vue-documenteditor/styles/material.css';

const ProjectDetails = defineComponent({

name: 'ProjectDetails',

components: { 'ejs-documenteditorcontainer': DocumentEditorContainerComponent},

data() {

return {

serviceUrl:'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/',

};

},

provide:{

DocumentEditorContainer: [Toolbar]

},

});

export default ProjectDetails;

script>

[Rama Ibrahim]

Solved my issue by updating to this code structure

<template>

<ejs-documenteditorcontainer height="1245px" :serviceUrl='serviceUrl' :enableToolbar='true'> ejs-documenteditorcontainer>

template>

<script>

import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';

//Component registeration

export default {

name: 'App',

components: {

// Declaring component

'ejs-documenteditorcontainer' : DocumentEditorContainerComponent

},

data () {

return {

serviceUrl:'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/'

};

},

provide: {

DocumentEditorContainer: [Toolbar]

}

}

script>

<style>

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

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

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

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

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

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

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

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

@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";

style>

[Suriya Murugan]

Thanks for your update.