boussadjra/vue3-router-tree

Error: Can't resolve '.vue3-router-tree'

Closed this issue · 3 comments

fasalir commented

Hello thanks for your great project, but im new to vuejs and i cant make it work on my project.

I have installed your project and import it, but it says not found
this what my code look like
<template><vue3-router-tree :items="routes"> </vue3-router-tree></template>
`<script>
import Vue3RouterTree from '.vue3-router-tree';
export default {
name: 'categoryProduct',
components: {
Vue3RouterTree
// Loading
},
data: function(){
return {
routes: [
{
path: '/',
name: 'Home',
hasIcon: true,
},
{
path: '/dashboard',
name: 'Dashboard',
hasIcon: true,
},
{
path: '/component',
name: 'Components',
hasIcon: true,
children: [
{
path: '/alerts',
name: 'Alerts',
},
{
path: '/avatars',
name: 'Avatars',
},
{
path: '/buttons',
name: 'Buttons',
},
{
path: '/forms',
name: 'Forms',
children: [
{
path: '/autocompletes',
name: 'Autocompletes',
},
{
path: '/checkboxes',
name: 'Checkboxes',
},
],
},
],
},
],
}
},
}

<script>` and when i remove the dot in import `import Vue3RouterTree from 'vue3-router-tree';` it shows error TypeError: Object(...) is not a function Please help me solve this, thank you
boussadjra commented

You are welcome, Please share your package.json file

fasalir commented

This is my package.json

{
  "name": "@coreui/coreui-free-vue-admin-template",
  "version": "3.0.0-beta.3",
  "description": "Open Source Bootstrap Admin Template",
  "author": {
    "name": "CoreUI",
    "url": "https://coreui.io",
    "github": "https://github.com/coreui",
    "twitter": "https://twitter.com/core_ui"
  },
  "contributors": [
    {
      "name": "CoreUI Team",
      "url": "https://github.com/orgs/coreui/people"
    }
  ],
  "homepage": "http://coreui.io",
  "copyright": "Copyright 2019 creativeLabs Łukasz Holeczek",
  "license": "MIT",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "clearCache": "jest --clearCache",
    "release": "npm-run-all clearCache lint build test:unit test:e2e"
  },
  "dependencies": {
    "@coreui/coreui": "^3.0.0-rc.0",
    "@coreui/icons": "^1.0.1",
    "@coreui/utils": "^1.2.2",
    "@coreui/vue": "^3.0.12",
    "@coreui/vue-chartjs": "^1.0.3",
    "@syncfusion/ej2-vue-schedule": "^17.4.47",
    "axios": "^0.19.2",
    "chart.js": "^2.9.3",
    "lodash": "^4.17.15",
    "luxon": "^1.22.0",
    "moment": "^2.27.0",
    "nprogress": "^0.2.0",
    "strophe": "^1.2.4",
    "strophejs-plugin-muc": "^1.1.0",
    "vue": "^2.6.11",
    "vue-chartjs": "^3.5.0",
    "vue-datetime": "^1.0.0-beta.11",
    "vue-drag-tree": "^1.1.9",
    "vue-input-tag": "^2.0.6",
    "vue-loading-overlay": "^3.2.0",
    "vue-native-websocket": "^2.0.13",
    "vue-plugin-load-script": "^1.3.0",
    "vue-recaptcha": "^1.3.0",
    "vue-router": "^3.1.5",
    "vue-select": "^3.10.8",
    "vue-sweetalert2": "^3.0.1",
    "vuex": "^3.1.2",
    "weekstart": "^1.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@vue/cli-plugin-babel": "^4.2.2",
    "@vue/cli-plugin-e2e-nightwatch": "^4.2.2",
    "@vue/cli-plugin-eslint": "^4.2.2",
    "@vue/cli-plugin-unit-jest": "^4.2.2",
    "@vue/cli-service": "^4.2.2",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^24.9.0",
    "chromedriver": "^79.0.3",
    "core-js": "^3.6.4",
    "eslint": "^6.8.0",
    "eslint-plugin-vue": "^6.1.2",
    "node-sass": "^4.14.1",
    "npm-run-all": "^4.1.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 9"
  ],
  "engines": {
    "node": ">= 8.10.x",
    "npm": ">= 5.6.0"
  }
}
boussadjra commented

You're using vue 2, but this component is only compatible with vue 3, if you want to keep working with vue 2 I recommend to work with this one https://github.com/MisRob/vue-tree-navigation