Project loads white screen after updating to vue 3

[daniimd]

Vue version

3.5.13

Link to minimal reproduction

http://localhost:8080/

Steps to reproduce

• Update project from vue 2 to vue 3
• Update all code according to the documentation

What is expected?

Return to login page

What is actually happening?

The project is loading the title and favicon, but the page is loading blank

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 1.83 GB / 7.85 GB
  Binaries:
    Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 131.0.6778.205
    Edge: Chromium (127.0.2651.98)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    vue: ^3.5.13 => 3.5.13

Any additional comments?

package.json:

"dependencies": {
    "@fortawesome/fontawesome-free": "^6.7.1",
    "@fortawesome/fontawesome-svg-core": "^6.7.1",
    "@fortawesome/free-brands-svg-icons": "^6.7.1",
    "@fortawesome/free-regular-svg-icons": "^6.7.1",
    "@fortawesome/free-solid-svg-icons": "^6.7.1",
    "@fortawesome/vue-fontawesome": "^3.0.8",
    "@mdi/font": "^7.4.47",
    "@vue/compat": "^3.5.13",
    "axios": "^1.7.7",
    "core-js": "^3.6.5",
    "js-sha256": "^0.11.0",
    "rxjs": "^7.8.1",
    "sha256": "^0.2.0",
    "socket.io-client": "^4.1.2",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0",
    "vuetify": "^3.7.6",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@types/chai": "^5.0.1",
    "@types/mocha": "^10.0.10",
    "@types/socket.io-client": "^3.0.0",
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-e2e-cypress": "^5.0.8",
    "@vue/cli-plugin-pwa": "^5.0.8",
    "@vue/cli-plugin-router": "^5.0.0",
    "@vue/cli-plugin-typescript": "^5.0.8",
    "@vue/cli-plugin-unit-mocha": "^5.0.8",
    "@vue/cli-plugin-vuex": "^5.0.0",
    "@vue/cli-service": "^5.0.8",
    "@vue/compiler-sfc": "^3.5.13",
    "@vue/test-utils": "^2.0.0-rc.17",
    "chai": "^5.1.2",
    "sass": "^1.19.0",
    "sass-loader": "^16.0.3",
    "typescript": "^5.7.2",
    "vue-loader": "^17.4.2",
    "vuetify-loader": "^1.9.2",
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4"
  }

env.d.ts:

interface ImportMetaEnv {
  readonly NODE_ENV: 'development' | 'production' | 'test';
  readonly VITE_API_ENDPOINT: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

main.ts:

import { createApp } from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';

const app = createApp(App);

app.use(vuetify);
app.mount('#app');

router:

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue'),

  },
];


const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_API_ENDPOINT),
  routes,
});

export default router;

If anyone knows anything or needs any more information... I had to update the old project and it required a lot of changes.
There are no errors in the console.
Thanks!

[Wei-Ba]

Link to minimal reproduction

http://localhost:8080/

bro, dont use local address...

routes add redirect

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/login' // or use index page
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue'),
  },
];