There's something wrong that I don't know. I'm using Vue 3 but it's not working

This is my code

<template>
<splitpanes vertical style="height: 400px">
  <pane min-size="20">1</pane>
  <pane>
    <splitpanes horizontal>
      <pane>2</pane>
      <pane>3</pane>
      <pane>4</pane>
    </splitpanes>
  </pane>
  <pane>5</pane>
</splitpanes>
</template>

<script setup>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
</script>

And it shows me this error And these warnings This is my package.json

{
  "dependencies": {
    "@popperjs/core": "^2.11.5",
    "bootstrap": "^5.2.0",
    "connect-history-api-fallback": "^2.0.0",
    "express": "^4.18.1",
    "splitpanes": "^3.1.0",
    "vue": "^3.2.37",
    "vue-router": "^4.0.13"
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "babel-loader": "^8.2.5",
    "compression-webpack-plugin": "^10.0.0",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "nodemon": "^2.0.19",
    "sass": "^1.54.3",
    "sass-loader": "^13.0.2",
    "unplugin-auto-import": "^0.11.2",
    "unplugin-vue-components": "^0.22.4",
    "vue-loader": "^17.0.0",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.7.8",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-middleware": "^5.3.3",
    "webpack-dev-server": "^4.9.3",
    "webpack-hot-middleware": "^2.25.1",
    "webpack-merge": "^5.8.0"
  }
}

antoniandre / splitpanes

There's something wrong that I don't know. I'm using Vue 3 but it's not working #170