Nuxt 'npm run dev' running but the webpage is not responding and won't load - vue.js

Question

I have been working with nuxt for my personal website. but suddenly the page won't load even though my nuxt dev running perfectly on the console. here is my nuxt-config.js:
// import { auth } from 'firebase'
import colors from 'vuetify/es5/util/colors'
export default {
srcDir: 'src/',
components: {
// global: true,
dirs: [
'~/components',
'~/components/main',
'~/components/user',
'~/components/feedback',
'~/components/auxiliary',
],
},
buildDir: 'functions/.nuxt',
mode: 'universal',
/*
** Headers of the page
*/
head: {
custom title page
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || '',
},
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
/*
** Customize the progress-bar color
*/
loading: { color: '#5f24', size: '30px' },
/*
** Global CSS
*/
css: [],
/*
** Plugins to load before mounting the App
*/
plugins: [
'~/plugins/components.js',
'~/plugins/icons-fa.js',
'~/plugins/filter.js',
],
/*
** Nuxt.js dev-modules
*/
buildModules: ['#nuxtjs/vuetify'],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
// Doc: https://github.com/nuxt-community/dotenv-module
'#nuxtjs/dotenv',
['vue-scrollto/nuxt', { duration: 1000 }],
[
'#nuxtjs/firebase',
{
config: {
serverDev: {
apiKey: process.env.FIREBASE_API_KEY_DEV,
authDomain: process.env.FIREBASE_AUTH_DOMAIN_DEV,
databaseURL: process.env.FIREBASE_DATABASE_URL_DEV,
projectId: process.env.FIREBASE_PROJECT_ID_DEV,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET_DEV,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID_DEV,
appId: process.env.FIREBASE_APP_ID_DEV,
measurementId: process.env.FIREBASE_MEASUREMENT_ID_DEV,
},
serverPrd: {
apiKey: process.env.FIREBASE_API_KEY_PRD,
authDomain: process.env.FIREBASE_AUTH_DOMAIN_PRD,
databaseURL: process.env.FIREBASE_DATABASE_URL_PRD,
projectId: process.env.FIREBASE_PROJECT_ID_PRD,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET_PRD,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID_PRD,
appId: process.env.FIREBASE_APP_ID_PRD,
measurementId: process.env.FIREBASE_MEASUREMENT_ID_PRD,
},
},
services: {
auth: true,
firestore: true,
storage: true,
analytics: true,
functions: true,
},
onFirebaseHosting: true,
customEnv: true,
},
],
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
baseURL: process.env.BASE_URL,
credentials: false,
},
/*
** vuetif module configuration
** https://github.com/nuxt-community/vuetify-module
*/
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: false,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3,
},
},
},
icons: {
iconfont: ['mdi', 'fa'],
},
},
/*
** Build configuration
*/
build: {
extractCSS: true,
extend(config, ctx) {},
transpile: ['vuetify/lib'],
babel: {
plugins: [['#babel/plugin-proposal-private-methods', { loose: true }]],
},
},
env: {
baseURL: process.env.BASE_URL,
apiKey: null,
FIRE_ENV: process.env.FIRE_ENV,
// Declare another env here
},
pageTransition: {
name: 'fade',
mode: 'out-in',
},
pluginOptions: {
ssr: {
nodeExternalsWhitelist: [/^vuetify/],
},
},
}
and here is my package-lock.json:
{
"name": "",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "FIRE_ENV=serverDev nuxt",
"build": "FIRE_ENV=serverPrd nuxt build",
"start": "FIRE_ENV=serverPrd nuxt start",
"generate": "FIRE_ENV=serverPrd nuxt generate",
"build:firebase": "FIRE_ENV=serverPrd npm run clean && npm run build && npm run copy && cd \"functions\" && npm i",
"clean": "npm run clean:public && npm run clean:functions && npm run clean:static",
"clean:functions": "rimraf \"functions/node_modules\" && rimraf \"functions/.nuxt\"",
"clean:public": "rimraf \"public/**/*.*!(md)\" && rimraf \"public/_nuxt\"",
"clean:static": "rimraf \"src/static/sw.js\"",
"copy": "npm run copy:nuxt && npm run copy:static",
"copy:nuxt": "mkdir public/_nuxt && cp -r functions/.nuxt/dist/* public/_nuxt",
"copy:static": "cp -r src/static/* public",
"start:firebase": "FIRE_ENV=serverPrd firebase serve --only functions,hosting",
"deploy": "FIRE_ENV=serverPrd firebase deploy --only functions,hosting"
},
"dependencies": {
"#loadingio/loading.css": "^2.0.1",
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/dotenv": "^1.4.1",
"#nuxtjs/firebase": "^7.6.1",
"#vue/compiler-dom": "^3.2.45",
"core-js": "^3.9.1",
"express": "^4.18.2",
"firebase": "^8.10.1",
"firebase-admin": "^11.4.1",
"firebase-functions": "^4.1.1",
"nuxt": "^2.15.3",
"vue": "^2.7.14",
"vue-scrollto": "^2.20.0"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
"#mdi/js": "^5.9.55",
"#nuxtjs/vuetify": "^1.12.3",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-prettier": "^3.3.1",
"material-design-icons-iconfont": "^6.1.0",
"prettier": "^2.2.1"
}
}
there are no error or warning, either on the server and client.
I have tried removing the package-lock.json, node_modules folder and .nuxt folder then npm install again but it still not working. I also tried using npm -i --legacy-peer-deps also not helping. any ideas what is wrong with my project? or shall i migrate to nuxt3?
Thank you