How use custom template in Treeview for Vue 3?

[Alex]

Hello, i dont understand how to use custom template in Treeview with Vue 3?

Seems like current docs typed for Vue 2:

https://ej2.syncfusion.com/vue/demos/#/material/treeview/template.html

https://ej2.syncfusion.com/vue/documentation/treeview/template/

This samples dont work for me. But without template treeview component works well.

Are you have any example for Vue 3?

Thanks.

[Sharon Sanchez Selvaraj]

Hi Alex, 

 

Greetings from Syncfusion Support. 

 

We have checked with your reported query regarding Templates in Vue 3. 

 

Refer to the changes to be made for rendering Vue 3 templates. 

 

<template> 

 <div class="control_wrapper"> 

        <ejs-treeview id='treeview' :fields="fields" cssClass='custom' :nodeTemplate='Template'></ejs-treeview> 

    </div> 

</template> 

 

<script lang="ts"> 

 

import { TreeViewComponent } from "@syncfusion/ej2-vue-navigations"; 

import { createApp } from "vue"; 

 

const app = createApp({ 

 template: '<hello></hello>' 

}); 

 

var Template = app.component("Template", { 

  template: "<div><img class='eimage' :src='data.eimg' alt='employee'/><div class='ename'>{{data.name}}</div><div class='ejob'>{{data.job}}</div></div>", 

  

  data() { 

    return { 

      data: {} 

    }; 

  } 

}); 

 var dataSource =  [ 

        { id: 1, name: 'Steven Buchanan', eimg: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/10.png', job: 'CEO', hasChild: true, expanded: true }, 

        { id: 2, pid: 1, name: 'Laura Callahan', eimg: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/2.png', job: 'Product Manager', hasChild: true }, 

        { id: 3, pid: 2, name: 'Andrew Fuller', eimg: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/7.png', job: 'Team Lead', hasChild: true }, 

        { id: 4, pid: 3, name: 'Anne Dodsworth', eimg: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/1.png', job: 'Developer' }, 

        { id: 5, pid: 1, name: 'Nancy Davolio', eimg: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/4.png', job: 'Product Manager', hasChild: true }, 

        { id: 6, pid: 5, name: 'Michael Suyama', eimg: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/9.png', job: 'Team Lead', hasChild: true }, 

        { id: 7, pid: 6, name: 'Robert King', eimg: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/8.png', job: 'Developer ' }, 

        { id: 8, pid: 7, name: 'Margaret Peacock', eimg: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/6.png', job: 'Developer' }, 

        { id: 9, pid: 1, name: 'Janet Leverling', eimg: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/3.png', job: 'HR' }, 

    ]; 

export default { 

  name: "App", 

  components: { 

    "ejs-treeview": TreeViewComponent, 

  }, 

  setup() { 

 

    return { 

        fields: { dataSource: dataSource, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' }, 

      Template: function () { 

        return { 

          template: Template, 

        }; 

      } 

    }; 

  }, 

} 

</script> 

 

 

 

 

Refer to the sample: 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeView2132206818.zip 

 

Refer to the below documentation for changes done with Template: 

 

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

 

Please get back to us if you need any further assistance. 

 

Regards, 

 

Sharon Sanchez S. 

[Alex]

Thanks for unswer! That solve my problem.

But can i ask, why u select so hard way instead of using slots? For exmaple, Tree from Element UI:

<el-tree :data="data" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"> <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <span> <el-button type="text" size="mini" @click="() => append(data)"> Append </el-button> <el-button type="text" size="mini" @click="() => remove(node, data)"> Delete </el-button> </span> </span> </el-tree>

So simple. Instead of that, i need to make new app and component. After that i have 2 problems:

1. I need to use a components from Quasar framework in template, but i cant, because Quasar have no way to import only one component like button.
2. It seems no way to emit custom events without eventbus.

Is there a chance that in the future it will be possible to set template with slots?

[Sharon Sanchez Selvaraj]

Hi Alex, 

 

Sorry for the inconvenience.  

 

We checked your requirement and would like to let you know that the slots support for template in Vue had already been considered as a new feature from our end. Generally, we will plan the feature implementation based on customer request count, feature rank and wishlist plan.  

  

Please track the below feedback link to know the status of the feature.  

 

https://www.syncfusion.com/feedback/4910/provide-the-scoped-slots-support-for-template-in-the-vue 

 

This support will be included in any one of our upcoming releases. 

 

Please let us know if you need any further assistance with Syncfusion Components. 

 

Regards, 

 

Sharon Sanchez S. 

[Alex]

Hi Sharon,

Its great, i'm vote and will be waiting for that update.

One more question - script works fine, but there is a warning in console. I just take your code, run 'npm i', then 'npm run serve' and get a warning:

warning in ./node_modules/@syncfusion/ej2-vue-navigations/src/accordion/items.directive.js

"export 'default' (imported as 'Vue') was not found in 'vue'

When i try to use TreeView in Quasar, i have 8 messages like that:

App WARNING UI in ./node_modules/@syncfusion/ej2-vue-base/src/component-b

ase.js

export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: B

aseTransition, Comment, Fragment, KeepAlive, Static, Suspense, Teleport, Text, T

ransition, TransitionGroup, callWithAsyncErrorHandling, callWithErrorHandling, c

amelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, crea

teBlock, createCommentVNode, createHydrationRenderer, createRenderer, createSSRA

pp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, def

ineAsyncComponent, defineComponent, defineEmit, defineEmits, defineExpose, defin

eProps, devtools, getCurrentInstance, getTransitionRawChildren, h, handleError,

hydrate, initCustomFormatter, inject, isProxy, isReactive, isReadonly, isRef, is

RuntimeOnly, isVNode, markRaw, mergeDefaults, mergeProps, nextTick, onActivated,

 onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured,

 onMounted, onRenderTracked, onRenderTriggered, onServerPrefetch, onUnmounted, o

nUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlush

Cb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, render

Slot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter

, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks,

 shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, toDispla

yString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, tri

ggerRef, unref, useAttrs, useContext, useCssModule, useCssVars, useSSRContext, u

seSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelS

elect, vModelText, vShow, version, warn, watch, watchEffect, withAsyncContext, w

ithCtx, withDefaults, withDirectives, withKeys, withModifiers, withScopeId)

What can i do to fix this warning?

[Keerthana Rajendran]

  

Hi Alex, 

 

Good day to you.  

 

We have checked the reported warnings and would like to mention that, it will not make any significant change into the application performance or build process. This warning will be seen in compile time and there will not be any runtime error/warning in the browser. 

 

We have provided both Vue 2 and Vue 3 support in single repository and these warnings are expected and known one. However, we assure that we will look into this once Vue releases the stable LTS version of Vue 3.  

 

Please let us know if you need any further assistance.  

  

Regards,  

Keerthana R.