Problem running treeview component

[nikklass]

Hi.

I cannot run the provided example in vue 3. Please assist. Am getting the following set of errors/ warnings when using this plugin in a vue 3 component:

[Vue warn]: provide() can only be used inside setup(). [Vue warn]: onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement. [Vue warn]: resolveComponent can only be used in render() or setup().

This is my code:

<template>
    <div class="container-fluid no-gutters px-0">
        <div class="row">
            <div class="col-12 mt-3 mb-2">

                    <div class="card">
                        <div class="card-body">

                            <!-- start tree -->
                                <tree :nodes="n1" :config="c1"></tree>
                                <tree :nodes="n2" :config="c2"></tree>
                            <!-- end tree -->

                        </div>
                    </div>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent } from "vue";

import treeview from "vue3-treeview";
import "vue3-treeview/dist/style.css";

const c1 = {
  roots: ["id1", "id2"],
};

const c2 = JSON.parse(JSON.stringify(c1));

const n1 = {
  id1: {
    text: "text1",
    children: ["id11", "id12"],
  },
  id11: {
    text: "text11",
  },
  id12: {
    text: "text12",
  },
  id2: {
    text: "text2",
  },
};

const n2 = JSON.parse(JSON.stringify(n1));

export default defineComponent({
  name: "accounts",

  components: {
    tree: treeview,
  },

  setup() {
    return {
      c1, c2, n1, n2
    };
  },
});
</script>

[N00ts]

Hey, can you provide a Sandbox to reproduce ?

[thangap2]

@N00ts Any update on this? I also getting the same error with Vue 3. Here is the sandbox at StackBlitz if you still looking for sandbox environment. You can see the error in the console.

https://stackblitz.com/edit/vue3-app-bgu5rj

[N00ts]

I'm a little busy right now but I promise I will take a look asap !

[N00ts]

It work perfectly fine with last versions of vue in a codesandbox. https://codesandbox.io/s/basic-1g2jt?from-embed. Maybe there is something wrong with stackblitz configuration. Do you also have the problem on a local repo ? Are you working with windows / linux ?

[thangap2]

@N00ts I am working on the windows environment and I have the issue same as stackblitz.

[N00ts]

@thangap2 can you provide your package.json dependencies ?

[noortotah]

@N00ts Any update on this? I am also getting the same error with Vue 3

I face the same issue. Did you find a solution?

[N00ts]

Just update vue version in package.json and it will work :)

"vue": "^3.2.26", "vue3-treeview": "^0.3.5"

[N00ts]

Closed since no answer