N
Nuxt•4w ago
TranceCode

Problem with show pages in menu

Friends, I have a problem loading views in my menu and front end. When I click on the menu it doesn't show me the views and when I check the terminal I have some problems that I can't understand why... I admit that it's been a long time since I started a new project with NuxtJS, maybe I missed something or I'm overlooking something... It shows me the error I share in the attached image. 
Failed to write the global types file. Make sure that:

1. "node_modules" directory exists.
2. "vue" is installed as a direct dependency.

Alternatively, you can manually set "vueCompilerOptions.globalTypesPath" in your "tsconfig.json" or "jsconfig.json". To prevent potential performance issues, consider adding `"exclude": ["node_modules"]` when creating a new config file.

If all dependencies are installed, try running the "vue.action.restartServer" command to restart Vue and TS servers.vue(404)
Failed to write the global types file. Make sure that:

1. "node_modules" directory exists.
2. "vue" is installed as a direct dependency.

Alternatively, you can manually set "vueCompilerOptions.globalTypesPath" in your "tsconfig.json" or "jsconfig.json". To prevent potential performance issues, consider adding `"exclude": ["node_modules"]` when creating a new config file.

If all dependencies are installed, try running the "vue.action.restartServer" command to restart Vue and TS servers.vue(404)
and this is my tsconfig.json 
{
  // https://nuxt.com/docs/guide/concepts/typescript
  "files": [],
  "references": [
    {
      "path": "./.nuxt/tsconfig.app.json"
    },
    {
      "path": "./.nuxt/tsconfig.server.json"
    },
    {
      "path": "./.nuxt/tsconfig.shared.json"
    },
    {
      "path": "./.nuxt/tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "skipLibCheck": true,
    "noEmit": true
  },
  "exclude": [
    "node_modules",
    "dist",
    ".nuxt",
    ".output"
  ],
  "vueCompilerOptions": {
    "globalTypesPath": "./types/global.d.ts"
  }
}
{
  // https://nuxt.com/docs/guide/concepts/typescript
  "files": [],
  "references": [
    {
      "path": "./.nuxt/tsconfig.app.json"
    },
    {
      "path": "./.nuxt/tsconfig.server.json"
    },
    {
      "path": "./.nuxt/tsconfig.shared.json"
    },
    {
      "path": "./.nuxt/tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "skipLibCheck": true,
    "noEmit": true
  },
  "exclude": [
    "node_modules",
    "dist",
    ".nuxt",
    ".output"
  ],
  "vueCompilerOptions": {
    "globalTypesPath": "./types/global.d.ts"
  }
}
Can't understand the problem
No description
3 Replies
kapa.ai
kapa.ai•4w ago
Hi @TranceCode. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error message you’re seeing—“Failed to write the global types file. Make sure that: 1. 'node_modules' directory exists. 2. 'vue' is installed as a direct dependency.”—is related to your development environment, not directly to Nuxt’s routing or menu logic. Based on the knowledge sources, this issue is commonly encountered when using the Vue VSCode extension (Volar) and is not specific to Nuxt itself. Here’s what you should check and try: 1. Ensure "vue" is a direct dependency
Make sure you have installed vue in your project, not just as a transitive dependency. Run: 
   npm install vue@^3
   
   npm install vue@^3
or 
   pnpm add vue@^3
   
   pnpm add vue@^3
as appropriate for your package manager. This step has resolved the issue for other users with the same error message Github Issue: Error when opening .vue files with Vue VS Code extension. 2. Check that "node_modules" exists
If you recently cloned the project or deleted node_modules, run: 
   npm install
   
   npm install
or 
   pnpm install
   
   pnpm install
to ensure all dependencies are present. 3. Restart VSCode’s TypeScript and Vue servers
Sometimes, the error persists until you restart the language servers. In VSCode, open the command palette and run: 
   > TypeScript: Restart TS server
   > Vue: Restart VLS
   
   > TypeScript: Restart TS server
   > Vue: Restart VLS
or simply reload the VSCode window. 4. About vueCompilerOptions.globalTypesPath
You have set "globalTypesPath": "./types/global.d.ts" in your tsconfig.json. Make sure this file exists. If you don’t need custom global types, you can remove this option to let Volar handle it automatically. 5. Exclude node_modules
You already have "exclude": ["node_modules", ...] in your config, which is correct and recommended. 6. Not a Nuxt Routing/Menu Issue
This error is not related to Nuxt’s routing or menu system, but rather to your editor’s type support setup. Once resolved, your menu and page navigation should work as expected, provided your Nuxt pages and routes are set up correctly. Summary:
Install vue as a direct dependency, ensure node_modules exists, and restart your editor’s language servers. This should resolve the error and restore proper type support and possibly fix issues with your menu not displaying pages, if those were caused by type errors interfering with development tools. For more details, see the discussion in this closed Nuxt issue. If you continue to have issues with the menu not showing pages after fixing the above, check your Nuxt pages directory and routing setup. But the error message you posted is specifically about your development environment, not Nuxt’s runtime. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@351111658694770689> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
TranceCode
TranceCodeOP•4w ago
this is my package.json 
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/ui": "^3.3.0",
    "@tailwindcss/vite": "^4.1.11",
    "nuxt": "^4.0.1",
    "tailwindcss": "^4.1.11",
    "typescript": "^5.8.3",
    "vue": "^3.5.18",
    "vue-router": "^4.5.1"
  }
}
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/ui": "^3.3.0",
    "@tailwindcss/vite": "^4.1.11",
    "nuxt": "^4.0.1",
    "tailwindcss": "^4.1.11",
    "typescript": "^5.8.3",
    "vue": "^3.5.18",
    "vue-router": "^4.5.1"
  }
}

Did you find this page helpful?