Migrate front end to Vuejs 3

.github/dependabot.yml

@@ -9,6 +9,15 @@ updates:
         update-types: ["version-update:semver-major"]
     versioning-strategy: increase
     target-branch: dev
+  - package-ecosystem: "npm"
+    directory: "/client-vue3"
+    schedule:
+      interval: "daily"
+    ignore:
+      - dependency-name: "*"
+        update-types: ["version-update:semver-major"]
+    versioning-strategy: increase
+    target-branch: feature/v3-migration
   - package-ecosystem: "pip"
     directory: "/server"
     schedule:

.github/labeler.yml

@@ -30,6 +30,9 @@ labels:
 - label: "client"
   files:
     - "client/.*"
+- label: "client-new"
+  files:
+    - "client-vue3/.*"
 - label: "server"
   files:
     - "server/.*"

.github/workflows/build.yml

@@ -17,20 +17,35 @@ jobs:
         with:
           node-version: '22'
           cache: 'npm'
-          cache-dependency-path: 'client/package-lock.json'
-      - name: Install dependencies
+          cache-dependency-path: |
+            client/package-lock.json
+            client-vue3/package-lock.json
+      - name: Install Vue 2 dependencies
         run: |
           cd client
           npm ci
-      - name: Build frontend
+      - name: Build Vue 2 frontend
         run: |
           cd client
           npm run build
-      - name: Upload frontend build
+      - name: Install Vue 3 dependencies
+        run: |
+          cd client-vue3
+          npm ci
+      - name: Build Vue 3 frontend
+        run: |
+          cd client-vue3
+          npm run build
+      - name: Upload Vue 2 frontend build
         uses: actions/upload-artifact@v4
         with:
-          name: frontend-build
+          name: frontend-vue2-build
           path: server/static/
+      - name: Upload Vue 3 frontend build
+        uses: actions/upload-artifact@v4
+        with:
+          name: frontend-vue3-build
+          path: server/static-vue3/
   build-executables:
     needs: build-front-end
     strategy:
@@ -57,11 +72,16 @@ jobs:
           python-version: '3.13'
           cache: 'pip'
           cache-dependency-path: 'server/requirements.txt'
-      - name: Download frontend build
+      - name: Download Vue 2 frontend build
         uses: actions/download-artifact@v4
         with:
-          name: frontend-build
+          name: frontend-vue2-build
           path: server/static
+      - name: Download Vue 3 frontend build
+        uses: actions/download-artifact@v4
+        with:
+          name: frontend-vue3-build
+          path: server/static-vue3
       - name: Install Python Packages
         run: python -m pip install -r server/requirements.txt
       - name: Build DigiScript with build script

.github/workflows/nodelint.yml

@@ -5,14 +5,27 @@ on: [push]
 jobs:
   run-node-lint:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        frontend: [vue2, vue3]
+        include:
+          - frontend: vue2
+            directory: ./client
+            lint_command: npm run ci-lint
+          - frontend: vue3
+            directory: ./client-vue3
+            lint_command: npm run ci-lint
     defaults:
       run:
-        working-directory: ./client
+        working-directory: ${{ matrix.directory }}
     steps:
     - uses: actions/checkout@v3
     - uses: actions/setup-node@v3
       with:
         node-version: 22
     - run: npm install -g npm@10
     - run: npm ci
-    - run: npm run ci-lint
+    - run: ${{ matrix.lint_command }}
+    - name: Type check Vue 3
+      if: matrix.frontend == 'vue3'
+      run: npm run type-check

.gitignore

@@ -1,5 +1,6 @@
 **/.DS_Store
 .claude
+CLAUDE.md
 
 # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
 # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839

Dockerfile

@@ -1,17 +1,38 @@
-FROM node:22-bookworm AS node_build
+# Vue 2 Frontend Build Stage
+FROM node:22-bookworm AS vue2_build
 
 RUN npm install npm@10 -g
-RUN mkdir -p /server/static
-
 COPY /client/package.json /client/package.json
 COPY /client/package-lock.json /client/package-lock.json
 WORKDIR /client
 RUN npm ci
 COPY /client /client
 RUN npm run build
 
+# Vue 3 Frontend Build Stage
+FROM node:22-bookworm AS vue3_build
+
+RUN npm install npm@10 -g
+COPY /client-vue3/package.json /client-vue3/package.json
+COPY /client-vue3/package-lock.json /client-vue3/package-lock.json
+WORKDIR /client-vue3
+RUN npm ci
+COPY /client-vue3 /client-vue3
+RUN npm run build
+
+# Server Preparation Stage
+FROM python:3.13-bookworm AS server_prep
+
 COPY /server /server
+RUN mkdir -p /server/static
+RUN mkdir -p /server/static-vue3
+
+# Copy Vue 2 build artifacts
+COPY --from=vue2_build /server/static/ /server/static/
+# Copy Vue 3 build artifacts  
+COPY --from=vue3_build /server/static-vue3/ /server/static-vue3/
 
+# Final Production Stage
 FROM python:3.13-bookworm
 
 COPY /server/requirements.txt ./requirements.txt
@@ -20,7 +41,8 @@ RUN pip install -r requirements.txt
 RUN apt update
 RUN apt install -y nano
 
-COPY --from=node_build /server /server
+# Copy server with both frontend builds
+COPY --from=server_prep /server /server
 WORKDIR /server
 RUN mkdir conf
 EXPOSE 8080

client-vue3/.eslintrc.cjs

@@ -0,0 +1,53 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    browser: true,
+  },
+  globals: {
+    RequestInfo: 'readonly',
+    RequestInit: 'readonly',
+    Headers: 'readonly',
+    fetch: 'readonly',
+  },
+  extends: [
+    'eslint:recommended',
+    '@vue/eslint-config-typescript/recommended',
+    'plugin:vue/vue3-essential',
+    'airbnb-base',
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  plugins: [
+    'vue',
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/multi-word-component-names': 'off',
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+        vue: 'always',
+      },
+    ],
+  },
+  settings: {
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+        project: './tsconfig.json',
+      },
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      },
+    },
+  },
+};

client-vue3/.gitignore

@@ -0,0 +1,42 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Dependencies
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.nvmrc
+
+# Testing
+coverage
+
+# Build outputs
+*.tsbuildinfo
+
+# OS generated files
+Thumbs.db

client-vue3/.npmrc

@@ -0,0 +1,2 @@
+# .npmrc
+engine-strict=true

client-vue3/env.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="vite/client" />
+/// <reference lib="DOM" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+// Environment variables type definitions
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string
+  // Add more env variables here as needed
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

client-vue3/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/v3/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DigiScript Vue 3</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>