How to use Vue component like VueTreeNavigation correctly?

Question

I want to use VueTreeNavigation together with Vue routing in Vue4.

I tried to follow the instructions from here

My main.js looks like

    import { createApp } from "vue"
import { createRouter, createWebHashHistory } from "vue-router"
import MyApp3 from "./MyApp3.vue"
import NotFound from "./components/NotFound.vue"

const routes = [
    {
      name: 'Home',
      path: '/',
      component: NotFound
    },
    {
      name: 'Running',
      path: '/running',
      children: [
        {
          name: 'Barefoot',
          path: 'barefoot',
        },
      ],
    },
    {
      name: 'Yoga',
      path: '/yoga',
      children: [
        {
          name: 'Mats',
          path: 'mats',
        },
        {
          name: 'Tops',
          path: 'tops',
        },
      ],
    },
    {
      name: 'About',
      path: '/about',
      children: [
        {
          name: 'Career',
          path: 'career',
          children: [
            {
              name: 'Design',
              path: 'design',
            },
          ],
        },
      ],
    },
  ];

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

const app = createApp(MyApp3)
app.use(router)

app.mount('#app')

My MyApp3.vue file looks like this:

<template>

  <img alt="Vue logo" src="./assets/logo.png">
<VueTreeNavigation />
    <vue-tree-navigation />
     

  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import VueTreeNavigation from 'vue-tree-navigation';

export default {
  
  name: 'MyApp3',
  components: {
    HelloWorld, VueTreeNavigation
  }


  
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

When I run

npm run serve

and go to localhost:8080 then I get the error message

runtime-core.esm-bundler.js:40 [Vue warn]: Component is missing template or render function. 
  at <VueTreeNavigation> 
  at <MyApp3>

from the browser. That message disappears, if I remove

<VueTreeNavigation />
        <vue-tree-navigation />

the first of above two lines from MyApp3.vue For the second line above, I don't even get an error message.

I have installed vue-tree-navigation with the command

npm install vue-tree-navigation

so my package.json file looks like:

{
  "name": "uebungsseite",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.2.3",
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-tree-navigation": "^4.0.1",
    "vue-router": "^4.2.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
    
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

If I add the lines

    import VueTreeNavigation from 'vue-tree-navigation'; 
import Vue from "vue"

    
    Vue.use(VueTreeNavigation);

in main.js , I get the error:

Cannot read properties of undefined (reading 'use')
TypeError: Cannot read properties of undefined (reading 'use')
    at eval (webpack-internal:///./src/main.js:14:45)
    at ./src/main.js (http://localhost:8080/js/app.js:85:1)
    at __webpack_require__ (http://localhost:8080/js/app.js:315:33)
    at http://localhost:8080/js/app.js:1436:109
    at __webpack_require__.O (http://localhost:8080/js/app.js:361:23)
    at http://localhost:8080/js/app.js:1437:53
    at http://localhost:8080/js/app.js:1439:12

What do I do wrong? Any help appreciated.

How to use Vue component like VueTreeNavigation correctly?

0 Answers0