Nuxt 3 / Vite 3 / Vue 3 Application not performing well in the browser (using Mac)

Question

I still don't have many components, despite I have a dynamic component , I've added configuration to auto imports of components to work, the main issue is that when doing npm run dev, the application in the browser sometimes stays blank, other times it renders but imposible to do right click to see the inspector, and even when I open the inspector using Chrome 3 dot menu, I can see different things :

• Sometimes when the application is visually rendered, the Elements part of the inspector is blank (empty)
• Sometimes keeps reloading infinidly without rendering nothing
• When using incognito window it usually renders fast but the page is still "frozen", not given the possibility of right click, showing the same issue for opening dev tools (the Chrome ones, because Nuxt dev tools, I have installed, the icon shows, but nothing happens when clicking in it), also in incognito, when rendering the app, sometimes the Elements tab of the inspector shows nothing, other times shows head and body tags but empty inside, and other times shows head but body empty, other times it shows the bundle (not showing anymore), and I stay in doubt on how to inspect HTML elements, since also the Nuxt Dev Tools seems not responding
• Moreover hot reloading of the application seems not be working. And when I do some change I always have to restart the server and open again in the browser. Same when refreshing the page, it stays indefenetly reloading and shows nothing in the end.
• I've tried several strategies, as making the components lazy and trying delay nuxt hydration as you see in the configuration (I'll leave more detail here), but nothing seems to improve responsiveness to the click and ability to inspect.

(In the beginning it appeared a message of optimizing dependencies, and hence I've tried optimizeDeps, but now this message doesn't appear anymore, even if with optimizeDeps commented)

nuxt.config.ts :


export default defineNuxtConfig({
  ssr: true,
  srcDir: 'src/',
  components: [
    {
      path: '~/components',
      pathPrefix: false,
    },
  ],
  nitro: {
    routeRules: {
      (...)
    }
  },
  modules: ['@bootstrap-vue-next/nuxt','nuxt-jsonld','@nuxtjs/i18n','@nuxt/devtools'],
//,'nuxt-delay-hydration'  
/* delayHydration: {
    mode: 'init',
    // enables nuxt-delay-hydration in dev mode for testing
    // NOTE: you should disable this once you've finished testing, it will break HMR
    debug: process.env.NODE_ENV === 'development'
  },*/
  i18n: {
    strategy: 'prefix_except_default',
    locales: FT_USE_ONLY_FRENCH_VERSION ? [DEFAULT_LOCALE] : LOCALES,
    defaultLocale: DEFAULT_LOCALE.code,
    detectBrowserLanguage: false, /
    vueI18n: './nuxt-i18n.js',
  },
  bootstrapVueNext: {
    composables: true,
  },
  css: ['bootstrap/dist/css/bootstrap.min.css','@/assets/scss/main.scss'],
  vite: {
    server: {
      watch: {
        usePolling: true
      }
    },
    css: {
      preprocessorOptions: {
        scss: { additionalData: '@import "@/assets/scss/_all.scss";' },
      },
    },
    plugins: [
      svgLoader(),
      // this plugin is necessary to allow the application to build when  using await for messages in i18n configuration
      topLevelAwait({
      // The export name of top-level await promise for each chunk module
      promiseExportName: "__tla",
      // The function to generate import names of top-level await promise in each chunk module
      promiseImportName: i => `__tla_${i}`
    })],
    /* optimizeDeps: {
      exclude: ['@unhead/vue','@prismicio/helpers'],
    },*/
  },
  devtools: { enabled: false },
  app: {
    head: {
      titleTemplate: '(...)'
    },
  },
  runtimeConfig: {
  (...)

### Additional context

_No response_

### Logs

_No response_