Nuxt 'shared/types':

[limpid yacht]

Hi @amber flume. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information provided in the knowledge sources, I can offer some insights into your issue with the shared/types directory in Nuxt.

The shared/ directory, including shared/types/, is a relatively new feature in Nuxt, available from version 3.14+. It's designed to share code between the Vue app and the Nitro server Docs > Guide > Directory-structure > shared.

However, your issue seems to be related to a known bug in JetBrains IDEs (including WebStorm). According to a Stack Overflow answer, there's a bug where custom global properties added by augmenting Vue are not resolved correctly in these IDEs Stack Overflow Post > Custom plugin in nuxt 3 has unknown type.

The bug is tracked here: [https://youtrack.jetbrains.com/issue/WEB-59818/Vue-custom-global-properties-added-by-augmenting-vue-are-not-resolved](https://youtrack.jetbrains.com/issue/WEB-59818/Vue-custom-global-properties-added-by-augmenting-vue-are-not-resolved)

As a workaround, you could try adding your types to the global namespace. Here's how you can do it:

// ~/types/my-types.d.ts
declare global {
  interface TestInterface {
    name: string
  }
}

// tell TypeScript that this file is a module
export {}

This approach was suggested in another Stack Overflow answer Stack Overflow Post > How to Automatically Recognize Type Definitions in Nuxt.js Project Without Explicit Imports in VSCode?.

If this doesn't resolve the issue, you might want to consider reporting it as a bug to the Nuxt team, following their guidelines for reporting bugs.

Remember to create a minimal reproduction of the issue, preferably using the Nuxt sandbox, to help the developers identify and fix the problem more easily.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@amber flume Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Let me check the knowledge base for you again. One moment! :books:

---

I apologize for the inconvenience. You're right that using declare global can lead to issues in server files. Let's explore other potential solutions based on the information available in our knowledge sources.

1. Separate TypeScript configuration:

According to the Docs > Guide > Directory-structure > server > Server Types, you can create a separate TypeScript configuration for your server directory. This might help resolve type issues between client and server code:

// server/tsconfig.json
{
  "extends": "../.nuxt/tsconfig.server.json"
}

2. Use client-only components:

If the issue persists only in Vue files, you could consider using client-only components for parts of your code that use these interfaces. This approach is mentioned in a comment on a Github Issue:

<template>
  <ClientOnly>
    <!-- Your component using TestInterface -->
  </ClientOnly>
</template>

3. Dynamic imports in onMounted:

Another approach suggested in the same Github issue is to use dynamic imports within the onMounted lifecycle hook:

<script setup>
import { onMounted } from 'vue'

onMounted(async () => {
  const { TestInterface } = await import('~/shared/types/your-file')
  // Use TestInterface here
})
</script>

4. Adjust tsconfig.json:

You might want to check your tsconfig.json file. Ensure it extends the Nuxt-generated configuration as mentioned in the Docs > Guide > Directory-structure > tsconfig:

{
  "extends": "./.nuxt/tsconfig.json"
}

5. Check Nuxt version and experimental features:

Ensure you're using the latest version of Nuxt, as some type-related issues have been addressed in recent updates. Also, you might want to consider enabling the normalizeComponentNames experimental feature, which could potentially help with type resolution Docs > Guide > Going-further > Experimental Features > normalizeComponentNames.

If none of these solutions work, it might be worth creating a minimal reproduction of the issue and reporting it to the Nuxt GitHub repository. The problem could be related to recent changes in type handling or auto-imports, as evidenced by recent pull requests like fix(nuxt): handle mismatching declaration/plugin extensions.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@amber flume Kapa.ai is still learning and improving, please let me know how I did by reacting below.