Update README

Signed-off-by: Muhammed Hussein Karimi <info@karimi.dev>

.eslintrc.cjs

@@ -92,9 +92,6 @@ module.exports = {
         "one-var": [ "error", "never" ],
         "max-statements-per-line": [ "error", { "max": 1 }],
         "@typescript-eslint/ban-ts-comment": "off",
-        "@typescript-eslint/no-unused-vars": [ "warn", {
-            "args": "none"
-        }],
         "prefer-const" : "off",
     },
 };

.github/workflows/ci.yml

@@ -1,57 +0,0 @@
-name: Node.js CI - Dockge
-
-on:
-  push:
-    branches: [master]
-    paths-ignore:
-      - '*.md'
-  pull_request:
-    branches: [master]
-    paths-ignore:
-      - '*.md'
-
-jobs:
-  ci:
-    strategy:
-      matrix:
-        os: [ubuntu-latest, windows-latest, macos-latest]
-        node: [20.x] # Can be changed
-    runs-on: ${{ matrix.os }}
-    steps:
-      - name: Checkout Code
-        uses: actions/checkout@v4
-
-      - run: git config --global core.autocrlf false  # Mainly for Windows
-      - uses: actions/checkout@v3
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{matrix.node}}
-
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        with:
-          version: 8
-          run_install: false
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Lint
-        run: pnpm run lint
-      # more things can be add later like tests etc..
-

README.md

@@ -4,19 +4,15 @@
 
 # Dockge
 
-A fancy, easy-to-use and reactive self-hosted docker compose.yaml stack-oriented manager.
+A fancy, easy-to-use and reactive docker `compose.yaml` stack-oriented manager.
-
-![GitHub Repo stars](https://img.shields.io/github/stars/louislam/dockge?logo=github) ![GitHub issues](https://img.shields.io/github/issues/louislam/dockge?logo=github) ![GitHub pull requests](https://img.shields.io/github/issues-pr/louislam/dockge?logo=github) ![Docker Pulls](https://img.shields.io/docker/pulls/louislam/dockge?logo=docker) ![Docker Image Version (latest semver)](https://img.shields.io/docker/v/louislam/dockge?logo=docker) ![GitHub last commit (branch)](https://img.shields.io/github/last-commit/louislam/dockge/master?logo=github) ![GitHub](https://img.shields.io/github/license/louislam/dockge?logo=github)
 
 <img src="https://github.com/louislam/dockge/assets/1336778/26a583e1-ecb1-4a8d-aedf-76157d714ad7" width="900" alt="" />
 
-View Video: https://youtu.be/AWAlOQeNpgU?t=48
+[View Video](https://youtu.be/AWAlOQeNpgU?t=48)
 
 ## ⭐ Features
 
 - Manage `compose.yaml`
-  - Create/Edit/Start/Stop/Restart/Delete
-  - Update Docker Images
 - Interactive Editor for `compose.yaml`
 - Interactive Web Terminal
 - Reactive
@@ -24,28 +20,20 @@ View Video: https://youtu.be/AWAlOQeNpgU?t=48
 - Easy-to-use & fancy UI
    - If you love Uptime Kuma's UI/UX, you will love this too
 - Convert `docker run ...` commands into `compose.yaml`
-- File based structure
-   - Dockge won't kidnap your compose files, they stored on your drive as usual. You can interact with them using normal `docker compose` commands   
-   <img src="https://github.com/louislam/dockge/assets/1336778/cc071864-592e-4909-b73a-343a57494002" width=300 />
-
-
-![](https://github.com/louislam/dockge/assets/1336778/89fc1023-b069-42c0-a01c-918c495f1a6a)
 
 ## 🔧 How to Install
 
 Requirements:
-- [Docker CE](https://docs.docker.com/engine/install/) 20+ is recommended / Podman
+- [Docker CE](https://docs.docker.com/engine/install/) 20+ is recommended
-- (Docker only) [Docker Compose Plugin](https://docs.docker.com/compose/install/linux/)
+- [Docker Compose V2](https://docs.docker.com/compose/install/linux/)
-- (Podman only) podman-docker (Debian: `apt install podman-docker`)
 - OS: 
-  - As long as you can run Docker CE / Podman, it should be fine, but:
+  - As long as you can run Docker CE, it should be fine, but:
-  - Debian/Raspbian Buster or lower is not supported, please upgrade to Bullseye or higher
+  - Debian/Raspbian Buster or lower is not supported, please upgrade to Bullseye
 - Arch: armv7, arm64, amd64 (a.k.a x86_64)
 
 ### Basic
 
-- Default Stacks Directory: `/opt/stacks`
+Default stacks directory is `/opt/stacks`.
-- Default Port: 5001
 
 ```
 # Create a directory that stores your stacks and stores dockge's compose.yaml
@@ -58,16 +46,16 @@ curl https://raw.githubusercontent.com/louislam/dockge/master/compose.yaml --out
 # Start Server
 docker compose up -d
 
-# If you are using docker-compose V1 or Podman
+# If you are using docker-compose V1
 # docker-compose up -d 
 ```
 
-Dockge is now running on http://localhost:5001
-
 ### Advanced
 
 If you want to store your stacks in another directory, you can change the `DOCKGE_STACKS_DIR` environment variable and volumes.
 
+For example, if you want to store your stacks in `/my-stacks`:
+
 ```yaml
 version: "3.8"
 services:
@@ -84,29 +72,24 @@ services:
       # If you want to use private registries, you need to share the auth file with Dockge:
       # - /root/.docker/:/root/.docker
 
-      # Your stacks directory in the host (The paths inside container must be the same as the host)
+      # Your stacks directory in the host
-      # ⚠️⚠️ If you did it wrong, your data could end up be written into a wrong path.
+      # (The paths inside container must be the same as the host)
-      # ✔️✔️✔️✔️ CORRECT EXAMPLE: - /my-stacks:/my-stacks (Both paths match)
+      - /my-stacks:/my-stacks
-      # ❌❌❌❌ WRONG EXAMPLE: - /docker:/my-stacks (Both paths do not match)
-      - /opt/stacks:/opt/stacks
     environment:
       # Tell Dockge where is your stacks directory
-      - DOCKGE_STACKS_DIR=/opt/stacks
+      - DOCKGE_STACKS_DIR=/my-stacks
 ```
 
 ## How to Update
 
 ```bash
-cd /opt/dockge
+cd /opt/stacks
 docker compose pull
 docker compose up -d
 ```
 
 ## Screenshots
 
-![](https://github.com/louislam/dockge/assets/1336778/e7ff0222-af2e-405c-b533-4eab04791b40)
-
-
 ![](https://github.com/louislam/dockge/assets/1336778/7139e88c-77ed-4d45-96e3-00b66d36d871)
 
 ![](https://github.com/louislam/dockge/assets/1336778/f019944c-0e87-405b-a1b8-625b35de1eeb)
@@ -122,22 +105,16 @@ docker compose up -d
 If you love this project, please consider giving this project a ⭐.
 
 
-## 🗣️
-
-### Bug Report
-https://github.com/louislam/dockge/issues
-
-### Ask for Help / Discussions
-https://github.com/louislam/dockge/discussions
-
 ## FAQ
 
 #### "Dockge"?
 
-"Dockge" is a coinage word which is created by myself. I hope it sounds like `Dodge`.
+"Dockge" is a coinage word which is created by myself. I hope it sounds like `Badge` but replacing with `Dock` - `Dock-ge`.
 
 The naming idea was coming from Twitch emotes like `sadge`, `bedge` or `wokege`. They are all ending with `-ge`.
 
+If you are not comfortable with the pronunciation, you can call it `Dockage`
+
 #### Can I manage a single container without `compose.yaml`?
 
 The main objective of Dockge is that try to use docker `compose.yaml` for everything. If you want to manage a single container, you can just use Portainer or Docker CLI.

backend/database.ts

@@ -80,7 +80,7 @@ export class Database {
      * @param {boolean} noLog Should logs not be output?
      * @returns {Promise<void>}
      */
-    static async connect(autoloadModels = true) {
+    static async connect(autoloadModels = true, noLog = false) {
         const acquireConnectionTimeout = 120 * 1000;
         let dbConfig;
         try {

backend/dockge-server.ts

@@ -291,7 +291,7 @@ export class DockgeServer {
             }
 
             // Run every 5 seconds
-            Cron("*/2 * * * * *", {
+            const job = Cron("*/2 * * * * *", {
                 protect: true,  // Enabled over-run protection.
             }, () => {
                 log.debug("server", "Cron job running");

backend/socket-handlers/main-socket-handler.ts

@@ -1,4 +1,5 @@
 import { SocketHandler } from "../socket-handler.js";
+import { Socket } from "socket.io";
 import { DockgeServer } from "../dockge-server";
 import { log } from "../log";
 import { R } from "redbean-node";

backend/stack.ts

@@ -24,7 +24,6 @@ export class Stack {
     protected _status: number = UNKNOWN;
     protected _composeYAML?: string;
     protected _configFilePath?: string;
-    protected _composeFileName: string = "compose.yaml";
     protected server: DockgeServer;
 
     protected combinedTerminal? : Terminal;
@@ -35,15 +34,6 @@ export class Stack {
         this.name = name;
         this.server = server;
         this._composeYAML = composeYAML;
-
-        // Check if compose file name is different from compose.yaml
-        const supportedFileNames = [ "compose.yaml", "compose.yml", "docker-compose.yml", "docker-compose.yaml" ];
-        for (const filename of supportedFileNames) {
-            if (fs.existsSync(path.join(this.path, filename))) {
-                this._composeFileName = filename;
-                break;
-            }
-        }
     }
 
     toJSON() : object {
@@ -60,7 +50,6 @@ export class Stack {
             status: this._status,
             tags: [],
             isManagedByDockge: this.isManagedByDockge,
-            composeFileName: this._composeFileName,
         };
     }
 
@@ -83,9 +72,9 @@ export class Stack {
     }
 
     validate() {
-        // Check name, allows [a-z][0-9] _ - only
+        // Check name, allows [a-z][A-Z][0-9] _ - only
-        if (!this.name.match(/^[a-z0-9_-]+$/)) {
+        if (!this.name.match(/^[a-zA-Z0-9_-]+$/)) {
-            throw new ValidationError("Stack name can only contain [a-z][0-9] _ - only");
+            throw new ValidationError("Stack name can only contain [a-z][A-Z][0-9] _ - only");
         }
 
         // Check YAML format
@@ -95,7 +84,7 @@ export class Stack {
     get composeYAML() : string {
         if (this._composeYAML === undefined) {
             try {
-                this._composeYAML = fs.readFileSync(path.join(this.path, this._composeFileName), "utf-8");
+                this._composeYAML = fs.readFileSync(path.join(this.path, "compose.yaml"), "utf-8");
             } catch (e) {
                 this._composeYAML = "";
             }
@@ -146,7 +135,7 @@ export class Stack {
         }
 
         // Write or overwrite the compose.yaml
-        fs.writeFileSync(path.join(dir, this._composeFileName), this.composeYAML);
+        fs.writeFileSync(path.join(dir, "compose.yaml"), this.composeYAML);
     }
 
     async deploy(socket? : DockgeSocket) : Promise<number> {
@@ -160,7 +149,7 @@ export class Stack {
 
     async delete(socket?: DockgeSocket) : Promise<number> {
         const terminalName = getComposeTerminalName(this.name);
-        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "down", "--remove-orphans" ], this.path);
+        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "down", "--remove-orphans", "--rmi", "all" ], this.path);
         if (exitCode !== 0) {
             throw new Error("Failed to delete, please check the terminal output for more information.");
         }
@@ -188,11 +177,6 @@ export class Stack {
 
             for (let filename of filenameList) {
                 try {
-                    // Check if it is a directory
-                    let stat = fs.statSync(path.join(stacksDir, filename));
-                    if (!stat.isDirectory()) {
-                        continue;
-                    }
                     let stack = this.getStack(server, filename);
                     stack._status = CREATED_FILE;
                     stackList.set(filename, stack);
@@ -362,11 +346,7 @@ export class Stack {
         for (let line of lines) {
             try {
                 let obj = JSON.parse(line);
-                if (obj.Health === "") {
+                statusList.set(obj.Service, obj.State);
-                    statusList.set(obj.Service, obj.State);
-                } else {
-                    statusList.set(obj.Service, obj.Health);
-                }
             } catch (e) {
             }
         }

compose.yaml

@@ -7,16 +7,14 @@ services:
       # Host Port : Container Port
       - 5001:5001
     volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
-      - ./data:/app/data
-        
       # If you want to use private registries, you need to share the auth file with Dockge:
       # - /root/.docker/:/root/.docker
 
+      # Docker Socket
+      - /var/run/docker.sock:/var/run/docker.sock
+      # Dockge Config
+      - ./data:/app/data
       # Your stacks directory in the host (The paths inside container must be the same as the host)
-      # ⚠️⚠️ If you did it wrong, your data could end up be written into a wrong path.
-      # ✔️✔️✔️✔️ CORRECT: - /my-stacks:/my-stacks (Both paths match)
-      # ❌❌❌❌ WRONG: - /docker:/my-stacks (Both paths do not match)
       - /opt/stacks:/opt/stacks
     environment:
       # Tell Dockge where is your stacks directory

extra/env2arg.js

@@ -1,20 +0,0 @@
-#!/usr/bin/env node
-
-import childProcess from "child_process";
-
-let env = process.env;
-
-let cmd = process.argv[2];
-let args = process.argv.slice(3);
-let replacedArgs = [];
-
-for (let arg of args) {
-    for (let key in env) {
-        arg = arg.replaceAll(`$${key}`, env[key]);
-    }
-    replacedArgs.push(arg);
-}
-
-let child = childProcess.spawn(cmd, replacedArgs);
-child.stdout.pipe(process.stdout);
-child.stderr.pipe(process.stderr);

extra/test-docker.ts

@@ -1,9 +0,0 @@
-// Check if docker is running
-import { exec } from "child_process";
-
-exec("docker ps", (err, stdout, stderr) => {
-    if (err) {
-        console.error("Docker is not running. Please start docker and try again.");
-        process.exit(1);
-    }
-});

extra/update-version.ts

@@ -1,64 +0,0 @@
-import pkg from "../package.json";
-import childProcess from "child_process";
-import fs from "fs";
-
-const newVersion = process.env.VERSION;
-
-console.log("New Version: " + newVersion);
-
-if (! newVersion) {
-    console.error("invalid version");
-    process.exit(1);
-}
-
-const exists = tagExists(newVersion);
-
-if (! exists) {
-    // Process package.json
-    pkg.version = newVersion;
-    fs.writeFileSync("package.json", JSON.stringify(pkg, null, 4) + "\n");
-    commit(newVersion);
-    tag(newVersion);
-} else {
-    console.log("version exists");
-}
-
-/**
- * Commit updated files
- * @param {string} version Version to update to
- */
-function commit(version) {
-    let msg = "Update to " + version;
-
-    let res = childProcess.spawnSync("git", [ "commit", "-m", msg, "-a" ]);
-    let stdout = res.stdout.toString().trim();
-    console.log(stdout);
-
-    if (stdout.includes("no changes added to commit")) {
-        throw new Error("commit error");
-    }
-}
-
-/**
- * Create a tag with the specified version
- * @param {string} version Tag to create
- */
-function tag(version) {
-    let res = childProcess.spawnSync("git", [ "tag", version ]);
-    console.log(res.stdout.toString().trim());
-}
-
-/**
- * Check if a tag exists for the specified version
- * @param {string} version Version to check
- * @returns {boolean} Does the tag already exist
- */
-function tagExists(version) {
-    if (! version) {
-        throw new Error("invalid version");
-    }
-
-    let res = childProcess.spawnSync("git", [ "tag", "-l", version ]);
-
-    return res.stdout.toString().trim() === version;
-}

frontend/src/components/ArraySelect.vue

@@ -5,7 +5,7 @@
                 <li v-for="(value, index) in array" :key="index" class="list-group-item">
                     <select v-model="array[index]" class="no-bg domain-input">
                         <option value="">Select a network...</option>
-                        <option v-for="option in options" :key="option" :value="option">{{ option }}</option>
+                        <option v-for="option in options" :value="option">{{ option }}</option>
                     </select>
 
                     <font-awesome-icon icon="times" class="action remove ms-2 me-3 text-danger" @click="remove(index)" />

frontend/src/components/Container.vue

@@ -9,7 +9,7 @@
                 <div v-if="!isEditMode">
                     <span class="badge me-1" :class="bgStyle">{{ status }}</span>
 
-                    <a v-for="port in service.ports" :key="port" :href="parsePort(port).url" target="_blank">
+                    <a v-for="port in service.ports" :href="parsePort(port).url" target="_blank">
                         <span class="badge me-1 bg-secondary">{{ parsePort(port).display }}</span>
                     </a>
                 </div>
@@ -179,10 +179,8 @@ export default defineComponent({
         },
 
         bgStyle() {
-            if (this.status === "running" || this.status === "healthy") {
+            if (this.status === "running") {
                 return "bg-primary";
-            } else if (this.status === "unhealthy") {
-                return "bg-danger";
             } else {
                 return "bg-secondary";
             }

frontend/src/components/NetworkInput.vue

@@ -32,7 +32,7 @@
                 class="form-control"
                 @keyup.enter="createExternelNetwork"
             />
-            <button class="btn btn-normal btn-sm  me-2" type="button">
+            <button class="btn btn-normal btn-sm  me-2" type="button" @click="">
                 {{ $t("createExternalNetwork") }}
             </button>
         </div>

frontend/src/components/Uptime.vue

@@ -19,6 +19,7 @@ export default {
 
     computed: {
         uptime() {
+            return "0.00%";
             return this.$t("notAvailableShort");
         },
 

frontend/src/components/settings/General.vue

@@ -68,13 +68,13 @@
 </template>
 
 <script>
-
+import HiddenInput from "../../components/HiddenInput.vue";
 import dayjs from "dayjs";
 import { timezoneList } from "../../util-frontend";
 
 export default {
     components: {
-
+        HiddenInput,
     },
 
     data() {

frontend/src/main.ts

@@ -23,9 +23,6 @@ import socket from "./mixins/socket";
 import lang from "./mixins/lang";
 import theme from "./mixins/theme";
 
-// Set Title
-document.title = document.title + " - " + location.host;
-
 const app = createApp(rootApp());
 
 app.use(Toast, {

frontend/src/pages/Compose.vue

@@ -68,10 +68,9 @@
                         <h4 class="mb-3">{{ $t("general") }}</h4>
                         <div class="shadow-box big-padding mb-3">
                             <!-- Stack Name -->
-                            <div>
+                            <div class="mb-3">
                                 <label for="name" class="form-label">{{ $t("stackName") }}</label>
-                                <input id="name" v-model="stack.name" type="text" class="form-control" required @blur="stackNameToLowercase">
+                                <input id="name" v-model="stack.name" type="text" class="form-control" required>
-                                <div class="form-text">Lowercase only</div>
                             </div>
                         </div>
                     </div>
@@ -118,7 +117,7 @@
                     </div>
                 </div>
                 <div class="col-lg-6">
-                    <h4 class="mb-3">{{ stack.composeFileName }}</h4>
+                    <h4 class="mb-3">compose.yaml</h4>
 
                     <!-- YAML editor -->
                     <div class="shadow-box mb-3 editor-box" :class="{'edit-mode' : isEditMode}">
@@ -583,10 +582,6 @@ export default {
             });
         },
 
-        stackNameToLowercase() {
-            this.stack.name = this.stack?.name?.toLowerCase();
-        },
-
     }
 };
 </script>

frontend/src/styles/main.scss

@@ -680,10 +680,6 @@ code {
     }
 }
 
-.form-text {
-    color: $dark-font-color3;
-}
-
 // Vue Prism Editor bug - workaround
 // https://github.com/koca/vue-prism-editor/issues/87
 /*

frontend/src/vite-env.d.ts

@@ -1,4 +1,3 @@
-/* eslint-disable */
 /// <reference types="vite/client" />
 
 declare module "*.vue" {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "dockge",
-    "version": "1.0.4",
+    "version": "1.0.0",
     "type": "module",
     "scripts": {
         "fmt": "eslint \"**/*.{ts,vue}\" --fix",
@@ -8,23 +8,23 @@
         "start": "tsx ./backend/index.ts",
         "dev:backend": "cross-env NODE_ENV=development tsx watch ./backend/index.ts",
         "dev:frontend": "cross-env NODE_ENV=development vite --host --config ./frontend/vite.config.ts",
-        "release-final": "tsx ./extra/test-docker.ts && tsx extra/update-version.ts && pnpm run build:frontend && npm run build:docker",
         "build:frontend": "vite build --config ./frontend/vite.config.ts",
         "build:docker-base": "docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:base -f ./docker/Base.Dockerfile . --push",
-        "build:docker": "node ./extra/env2arg.js docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:latest -t louislam/dockge:1 -t louislam/dockge:$VERSION --target release -f ./docker/Dockerfile . --push",
+        "build:docker": "pnpm run build:frontend && docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:latest -t louislam/dockge:1 -t louislam/dockge:1.0.0 --target release -f ./docker/Dockerfile . --push",
         "build:docker-nightly": "pnpm run build:frontend && docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:nightly --target nightly -f ./docker/Dockerfile . --push",
         "start-docker": "docker run --rm -p 5001:5001 --name dockge louislam/dockge:latest",
         "mark-as-nightly": "tsx ./extra/mark-as-nightly.ts"
     },
     "dependencies": {
-        "@homebridge/node-pty-prebuilt-multiarch": "~0.11.11",
+        "@fontsource/jetbrains-mono": "^5.0.17",
+        "@homebridge/node-pty-prebuilt-multiarch": "~0.11.10",
         "@louislam/sqlite3": "~15.1.6",
         "bcryptjs": "~2.4.3",
         "check-password-strength": "~2.0.7",
         "command-exists": "~1.2.9",
         "compare-versions": "~6.1.0",
         "composerize": "~1.4.1",
-        "croner": "~7.0.5",
+        "croner": "~7.0.4",
         "dayjs": "~1.11.10",
         "express": "~4.18.2",
         "express-static-gzip": "~2.1.7",
@@ -44,18 +44,17 @@
         "yaml": "~2.3.4"
     },
     "devDependencies": {
-        "@fontsource/jetbrains-mono": "^5.0.17",
         "@fortawesome/fontawesome-svg-core": "6.4.2",
         "@fortawesome/free-regular-svg-icons": "6.4.2",
         "@fortawesome/free-solid-svg-icons": "6.4.2",
         "@fortawesome/vue-fontawesome": "3.0.3",
-        "@types/bootstrap": "~5.2.9",
+        "@types/bootstrap": "~5.2.8",
         "@types/command-exists": "~1.2.3",
         "@types/express": "~4.17.21",
-        "@types/jsonwebtoken": "~9.0.5",
+        "@types/jsonwebtoken": "~9.0.4",
         "@typescript-eslint/eslint-plugin": "~6.8.0",
         "@typescript-eslint/parser": "~6.8.0",
-        "@vitejs/plugin-vue": "~4.5.0",
+        "@vitejs/plugin-vue": "~4.3.4",
         "bootstrap": "5.3.2",
         "bootstrap-vue-next": "~0.14.10",
         "cross-env": "~7.0.3",
@@ -66,7 +65,7 @@
         "sass": "~1.68.0",
         "typescript": "~5.2.2",
         "unplugin-vue-components": "~0.25.2",
-        "vite": "~5.0.0",
+        "vite": "~4.5.0",
         "vite-plugin-compression": "~0.5.1",
         "vue": "~3.3.8",
         "vue-eslint-parser": "~9.3.2",
@@ -75,7 +74,7 @@
         "vue-qrcode": "~2.2.0",
         "vue-router": "~4.2.5",
         "vue-toastification": "2.0.0-rc.5",
-        "xterm": "5.4.0-beta.37",
+        "xterm": "~5.4.0-beta.37",
         "xterm-addon-web-links": "~0.9.0"
     }
 }