Document is not defined with Nuxt.js

[JoepOomens]

When I use the Tree component in Nuxt.js, I get the 'document is not defined' error when opening the page. I guess it has to do with the SSR in Nuxt, but the error still exists with the tag.

Has somebody solved this issue?

<template>
    <no-ssr>
        <Tree :data="list" draggable="draggable" cross-tree="cross-tree">
            <div slot-scope="{ data, store }">
                <template v-if="!list.isDragPlaceHolder"
                    ><b v-if="list.children && list.children.length" @click="store.toggleOpen(list)">
                        {{ list.open ? '-' : '+' }} </b
                    ><span>{{ list.text }}</span>
                </template>
            </div>
        </Tree>
    </no-ssr>
</template>

<script>
import { Tree} from 'vue-draggable-nested-tree';
export default {
    components: {
        Tree,
    },
    computed: {
        list() {
            return [
                { text: '123' },
                { text: '456', children: [{ text: '456-123' }] },
                {
                    text: '789',
                    children: [
                        {
                            text: '789-123',
                            children: [{ text: '789-123-123' }],
                        },
                        {
                            text: '789-456',
                        },
                    ],
                },
            ];
        },
    },
};
</script>```

[phphe]

disable it in ssr

[JoepOomens]

I disabled it already using that no-ssr tag, right? Or is there another way I don't know?

[phphe]

I need error detail

[JoepOomens]

The errorpage mentiones the following:

ReferenceError: document is not defined. node_modules\vue-draggable-nested-tree\dist\vue-draggable-nested-tree.cjs.js line 509:1

if (!document.elementsFromPoint) {
  document.elementsFromPoint = elementsFromPoint;
}

[phphe]

https://stackoverflow.com/a/50458090

[JoepOomens]

I didn't looked into it, but now I did. I have now the following code (as mentioned in the link you sent):

DraggableTree.vue `

` index.vue ` export default { components: { DraggableTree: () => import('@/components/DraggableTree.vue'), } }` Now I get the following two errors, the first one in the browser and the second one in the terminal of the "npm run dev" script 1. NuxtServerError: render function or template not defined in component: DraggableTree 2. [Vue warn]: Failed to resolve async component: () => __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! @/components/DraggableTree.vue */ "./components/DraggableTree.vue")) Reason: ReferenceError: document is not defined

[phphe]

export default { components: { DraggableTree: () => import('vue-draggable-nested-tree').then(m => m.DraggableTree), } }

[JoepOomens]

TypeError: Cannot read property '__esModule' of undefined :(

[phphe]

not clear

[transtone]

use nuxt plugin to set it as a globle component will solve the problem.

[phphe]

Thank you for your use. I published he-tree-vue. vue-draggable-nested-tree will no longer be updated. try this https://he-tree-vue.phphe.com/