I'm having issue getting type for cutsom fetch plugin | Nuxt | Page 1

lean grottoBOT Jul 6, 2025, 2:58 AM

#

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

#

To get proper TypeScript types for your custom $api fetch plugin in Nuxt, you need to ensure that your plugin provides a correctly typed instance of $fetch, and that you cast it appropriately when using it in your composables.

Here's how you can do it, based on the official Nuxt documentation:

Create your custom $fetch instance in a plugin and provide it as $api:

// plugins/api.ts
export default defineNuxtPlugin((nuxtApp) => {
  const api = $fetch.create({
    baseURL: '<https://your-django-api.com',>
    // ...other options
  })

  return {
    provide: {
      api
    }
  }
})

Type your custom fetch instance when using it in composables. The key is to cast $api as typeof $fetch so TypeScript knows it has the same shape as the standard $fetch:

// composables/useAPI.ts
import type { UseFetchOptions } from 'nuxt/app'

export function useAPI<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$api as typeof $fetch // <-- type cast here
  })
}

This approach ensures that your $api instance is recognized as a proper fetch instance by TypeScript, and you get full type safety and autocompletion when using it in your app. This pattern is recommended in the Nuxt documentation and addresses the common type mismatch issues you might see in editors like VSCode or WebStorm. If you want to customize error types, you can further specify them as shown in the docs.

For more details and examples, see the official Nuxt guide on Custom useFetch in Nuxt and the related type casting update in the documentation.

#

If you still encounter issues, make sure your plugin is loaded correctly and that your editor has picked up the new types (sometimes a restart or re-index is needed) Custom useFetch in Nuxt.

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

#

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

quick olive Jul 6, 2025, 3:05 AM

#

@lean grotto I'm using the $api instance inside the template is that a good practice ?
<script setup lang="ts">

import Hero from "~/components/hero/hero.vue";
import Faq from "~/components/faq.vue";
import GoTop from "~/components/shared/go-top.vue";
const { $api } = useNuxtApp()

const { data } = await useAsyncData('modules', () => $api('/boat-types/',))
console.log($api, 'this is the $api');
definePageMeta({
layout: 'landing'
})
</script>

lean grottoBOT Jul 6, 2025, 3:05 AM

#

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

#

Using the $api instance (your custom $fetch) directly inside the template is not recommended. In your example, you are not actually using $api in the template, but rather in the <script setup> block, which is the correct approach.

Best Practice:

Use $api (or any data-fetching logic) inside the <script setup> block to fetch and prepare data.
Pass the resulting data (e.g., from useAsyncData or useFetch) to your template for rendering.

Why?

Templates should be used for displaying data, not for making API calls or handling business logic.
Fetching data in the template would break the reactivity and SSR/CSR data hydration Nuxt provides.
Using $api in <script setup> ensures you benefit from Nuxt's SSR-friendly data fetching, payload transfer, and avoids double-fetching issues [Custom useFetch in Nuxt].

Your code is correct:
You are using $api in the <script setup> block to fetch data with useAsyncData, and then displaying data in the template. This follows Nuxt best practices.

Summary:
Do not use $api directly in the template. Use it in <script setup> or composables, and only display the resulting data in the template. This is the recommended and SSR-safe approach in Nuxt [Custom useFetch in Nuxt].

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

#

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

vague spade Jul 6, 2025, 4:22 AM

#

Do you mean ‘data’ isn’t typed or the $api isn’t giving the type hints when you add options?

quick olive Jul 10, 2025, 12:12 AM

#

vague spade Do you mean ‘data’ isn’t typed or the $api isn’t giving the type hints when you ...

I fixed that issue I created a new project and turns out it wasnt reading types properly I had to run npx nuxt prepare
but now I'm lost on another problem 🙂 I want to seperate my api calls using my custom $fetch and I usually put them in a api/auth (for example )

#

I get hit with this message " A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug"

#

@lean grotto I fixed that issue I created a new project and turns out it wasnt reading types properly I had to run npx nuxt prepare
but now I'm lost on another problem 🙂 I want to seperate my api calls using my custom $fetch and I usually put them in a api/auth (for example )
I get hit with this message " A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug"

lean grottoBOT Jul 10, 2025, 12:14 AM

#

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

#

The error message:

"A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug"

means that you are calling a Nuxt composable (such as useNuxtApp, useRuntimeConfig, or your custom $api which depends on the Nuxt context) outside of the allowed context. In Nuxt, composables that depend on the Nuxt instance can only be used inside:

Vue <script setup> or setup() functions
Nuxt plugins
Nuxt route middleware

If you try to use them at the top level of a module (for example, directly in your api/auth.ts file, outside of a function), you will get this error. This is a common pitfall when trying to organize API calls in separate files.

How to fix:

Wrap your API calls in functions that are only executed inside the allowed context.
Do not call composables at the top level of your API utility files.

Example (correct usage):

// composables/api/auth.ts
export function useAuthApi() {
  const { $api } = useNuxtApp()
  return {
    login: (payload) => $api('/auth/login', { method: 'POST', body: payload }),
    logout: () => $api('/auth/logout', { method: 'POST' }),
  }
}

Then, in your component or plugin:

<script setup lang="ts">
const { login } = useAuthApi()
const { data, error } = await login({ username: 'user', password: 'pass' })
</script>

Why?
Nuxt composables rely on the Nuxt context, which is only available during certain parts of the app lifecycle. If you call them outside of these (e.g., at the top level of a module), the context is not available and you get this error [Auto-imports: Vue and Nuxt Composables].

#

Summary:

Only call composables like useNuxtApp or anything that uses $api inside functions that are executed in the correct context (setup, plugin, middleware).
Do not call them at the top level of your API utility files.

For more details, see the official docs: Auto-imports: Vue and Nuxt Composables.

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

#

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

quick olive Jul 10, 2025, 12:28 AM

#

@lean grotto $api('/auth/login', { method: 'POST', body: payload })
the $api inside the composable has unknown type

lean grottoBOT Jul 10, 2025, 12:28 AM

#

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

#

When you use $api inside a composable, TypeScript may show it as type unknown unless you explicitly cast it or augment the types. This is a known issue because Nuxt's auto-injection of plugin-provided properties like $api does not automatically provide type information unless you declare it.

Solution:
You should cast $api as typeof $fetch when using it, as recommended in the Nuxt documentation. Here’s how you can do it:

export function useAuthApi() {
  const { $api } = useNuxtApp()
  // Cast $api to the correct type
  const api = $api as typeof $fetch

  return {
    login: (payload) => api('/auth/login', { method: 'POST', body: payload }),
    logout: () => api('/auth/logout', { method: 'POST' }),
  }
}

This casting ensures that TypeScript recognizes $api as a fetch instance and provides proper type checking and autocompletion. This approach is documented in the Nuxt guide for Custom useFetch in Nuxt.

If you want to go further and have $api globally typed, you can augment the NuxtApp type in a d.ts file, but the simplest and most direct solution is to cast as shown above.

Summary:
Cast $api as typeof $fetch inside your composable to get the correct type and TypeScript support, as recommended in the official Nuxt documentation Custom useFetch in Nuxt.

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

#

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

quick olive Jul 10, 2025, 12:36 AM

#

@lean grotto my signUp method fro the composable now uses $api
async function useRegister(userInfo: UserRegistrationDTO) {
const {data, error} = await signUp(userInfo);

        if (error.value) {
            console.error('Registration failed:', error.value);
            logout();
            return error.value;
        }

        useSetAuth(<JWT>data.value);
        await navigateTo('/dashboard');
    }

and this is a method from my auth store, is it correct or should i change something ?

lean grottoBOT Jul 10, 2025, 12:36 AM

#

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

#

Based on the information in the knowledge sources, your approach is generally correct: you are calling your signUp composable (which uses $api), handling errors, updating authentication state, and navigating on success. This matches recommended Nuxt patterns for handling API calls and authentication flows in composables and stores.

A few points to consider, based on Nuxt best practices:

Context for Composables:
Ensure that signUp is a function that calls $api inside a valid context (such as inside a composable or a setup function), not at the top level of a module. This avoids the "composable that requires access to the Nuxt instance was called outside..." error [Auto-imports: Vue and Nuxt Composables].
Type Safety for $api:
If you use $api in your composable, cast it as typeof $fetch to get proper TypeScript support, as discussed previously and recommended in the Custom useFetch in Nuxt documentation.
Error Handling:
Your error handling is appropriate: you check for error.value, log it, perform a logout, and return the error. This is in line with Nuxt's recommended error handling patterns for composables that return { data, error } [useFetch API].
State Management:
Calling useSetAuth(<JWT>data.value) to update your authentication state is a good practice, as is redirecting the user after successful registration.

Example (based on your code and Nuxt docs):

async function useRegister(userInfo: UserRegistrationDTO) {
  const { data, error } = await signUp(userInfo);

#

if (error.value) {
console.error('Registration failed:', error.value);
logout();
return error.value;
}

useSetAuth(<JWT>data.value);
await navigateTo('/dashboard');
}


**Summary:**  
Your method is correct and follows Nuxt best practices, as long as your `signUp` function is implemented as a composable that uses `$api` in the correct context and you ensure type safety for `$api` as described above. If you follow these patterns, your approach is solid and aligns with the official Nuxt documentation [[Custom useFetch in Nuxt](<https://nuxt.com/docs/guide/recipes/custom-usefetch#custom-fetch>)].
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

#

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

quick olive Jul 20, 2025, 8:26 PM

#

@lean grotto Failed to resolve import "~/.nuxt/components" from "components/dashboard/boat/AddEditLayout.vue". Does the file exist?
C:/Users/oussama/Documents/projects/boat/boats-app/components/dashboard/boat/AddEditLayout.vue:11:7
9 | DashboardBoatStepsBoatPhotos,
10 | DashboardBoatStepsCancellationPolicy
11 | } from "~/.nuxt/components";
| ^
12 | const _sfc_main = /* @PURE */ _defineComponent({
13 | __name: "AddEditLayout",
i have this issue importing some components
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import type { Boat } from '~/schemas/boatSchema'
import { toast } from 'vue-sonner'
import {
DashboardBoatStepsBoatInformation,
DashboardBoatStepsBoatLocation,
DashboardBoatStepsBoatPhotos,
DashboardBoatStepsCancellationPolicy
} from "~/.nuxt/components";

// Using the explicit manual imports as requested.

// The component map now uses the variables from the manual imports above.
const stepComponents = {
info: DashboardBoatStepsBoatInformation,
location: DashboardBoatStepsBoatLocation,
photos: DashboardBoatStepsBoatPhotos,
cancellation: DashboardBoatStepsCancellationPolicy,
};
const steps = [
{ id: 'info', name: 'Boat Information' },
{ id: 'location', name: 'Boat Location' },
{ id: 'photos', name: 'Photos' },
{ id: 'cancellation', name: 'Cancellation Policy' },
];

lean grottoBOT Jul 20, 2025, 8:26 PM

#

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

#

The error

Failed to resolve import "~/.nuxt/components" from "components/dashboard/boat/AddEditLayout.vue". Does the file exist?

happens because you are trying to import components directly from the ~/.nuxt/components path, which does not exist at runtime and is not meant to be imported this way in your source files.

Correct usage in Nuxt:

Nuxt auto-imports components from your components/ directory, so you can use them directly in your templates without importing them manually [Auto-imported Components].
If you need to explicitly import a component (for example, for dynamic usage), you should import it from the #components alias, not from ~/.nuxt/components [Direct Imports].

How to fix:

Replace

import {
  DashboardBoatStepsBoatInformation,
  DashboardBoatStepsBoatLocation,
  DashboardBoatStepsBoatPhotos,
  DashboardBoatStepsCancellationPolicy
} from "~/.nuxt/components";

with

import {
  DashboardBoatStepsBoatInformation,
  DashboardBoatStepsBoatLocation,
  DashboardBoatStepsBoatPhotos,
  DashboardBoatStepsCancellationPolicy
} from '#components'

This will resolve the import error, as #components is the correct alias for accessing auto-imported components in Nuxt [Direct Imports].

Summary:
Do not import from ~/.nuxt/components. Use the #components alias for explicit imports, or rely on Nuxt's auto-import in your templates.

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

#

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

quick olive Jul 20, 2025, 8:30 PM

#

TS2307: Cannot find module #components or its corresponding type declarations.
@lean grotto

lean grottoBOT Jul 20, 2025, 8:30 PM

#

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

#

The error

TS2307: Cannot find module '#components' or its corresponding type declarations.

means that TypeScript cannot resolve the #components alias. According to the Nuxt documentation, the #components alias is auto-generated by Nuxt and should be available for explicit imports of auto-registered components [Direct Imports].

Possible causes and solutions:

Nuxt build not run yet:
The #components alias and its type declarations are generated when you run nuxi dev or nuxi build. If you haven't started the dev server or built the project, these files won't exist and TypeScript will not recognize the alias.
Solution: Run npx nuxt prepare or start your dev server with npx nuxi dev to generate the necessary files [Auto-generated Types].
Editor not refreshed:
Sometimes, your editor (like VSCode) needs to be restarted or the TypeScript server needs to be reloaded after the files are generated.
Custom tsconfig issues:
If you have overridden or misconfigured your tsconfig.json, it may not include the paths generated by Nuxt. The documentation warns that overwriting options such as "compilerOptions.paths" can lead to module resolutions such as #components not being recognized [Auto-generated Types].

In case you need to extend options provided by ./.nuxt/tsconfig.json further, you can use the alias property within your nuxt.config. Nuxt will pick them up and extend ./.nuxt/tsconfig.json accordingly.

#

Summary:

Make sure you have run npx nuxt prepare or started the dev server at least once.
Do not override "compilerOptions.paths" in your root tsconfig.json—let Nuxt manage it.
If the problem persists, restart your editor.

If you follow these steps and still see the error, the knowledge sources do not provide further troubleshooting steps for this specific issue.

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

#

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

quick olive Jul 20, 2025, 9:02 PM

#

@lean grotto how do i import those components in the script using nuxt

lean grottoBOT Jul 20, 2025, 9:02 PM

#

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

#

In Nuxt, components placed in your components/ directory are auto-imported, so you can use them directly in your templates without needing to import them in your <script setup> block. For example, if you have a component at components/DashboardBoatStepsBoatInformation.vue, you can use <DashboardBoatStepsBoatInformation /> directly in your template [components directory].

If you need to explicitly import a component in your script (for example, to use it in a variable or for dynamic component rendering), you should import it from the #components alias, not from a relative path or ~/.nuxt/components. Here’s how you do it:

<script setup lang="ts">
import { DashboardBoatStepsBoatInformation } from '#components'
</script>

This is the correct way to import auto-registered components in Nuxt for use in your script logic [Direct Imports].

Note:
The #components alias is generated by Nuxt when you run the dev server or build your project. If you see a TypeScript error about not finding #components, make sure you have run npx nuxt prepare or started your dev server at least once, and avoid overriding "compilerOptions.paths" in your tsconfig.json [Auto-generated Types].

Summary:

Use components directly in your template (auto-imported).
For explicit imports in your script, use the #components alias.

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

#

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

quick olive Jul 20, 2025, 9:03 PM

#

#

@lean grotto im hading this issue

lean grottoBOT Jul 20, 2025, 9:04 PM

#

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

#

If you are having the issue:

TS2307: Cannot find module '#components' or its corresponding type declarations.

when trying to import components in your Nuxt script, the knowledge sources indicate that:

The #components alias is auto-generated by Nuxt when you run nuxi dev or nuxi build. This alias allows you to explicitly import auto-registered components in your script, for example:
```
import { DashboardBoatStepsBoatInformation } from '#components'
```
If you see this error, it usually means that the .nuxt directory (where these type declarations are generated) does not exist or is out of date. You should run npx nuxt prepare or start your dev server with nuxi dev to generate the necessary files and type declarations. This is required for TypeScript to recognize the #components alias and provide proper type support [Auto-generated Types].
Also, ensure you have not overridden "compilerOptions.paths" in your tsconfig.json, as this can prevent Nuxt from injecting the correct paths for its auto-generated aliases [Auto-generated Types].

If you have done all of the above and still encounter the error, the knowledge sources do not provide further troubleshooting steps for this specific issue.

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

#

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

quick olive Jul 20, 2025, 9:20 PM

#

@lean grotto having this issue again using jetbrain webstorm

lean grottoBOT Jul 20, 2025, 9:20 PM

#

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

#

I'm sorry you're still experiencing this issue in JetBrains WebStorm. According to the knowledge sources, the #components alias and its type declarations are auto-generated by Nuxt when you run nuxi dev, nuxi build, or npx nuxt prepare. If these files are not generated or your IDE does not pick them up, TypeScript will not recognize the alias and you'll see the "Cannot find module '#components'" error [Auto-generated Types].

Additionally, there is a known issue with JetBrains IDEs (like WebStorm and PhpStorm) where custom global properties or auto-imported types in Nuxt are sometimes not resolved correctly, even if everything is set up properly. This is referenced in a Stack Overflow answer, which links to a JetBrains issue tracker entry describing the problem. The workaround is to try opening the same project in VSCode, where the types are recognized correctly [Custom plugin in nuxt 3 has unknown type].

Summary of steps to try:

Make sure you have run npx nuxt prepare or started your dev server at least once.
Avoid overriding "compilerOptions.paths" in your tsconfig.json.
If the problem persists, it may be due to a JetBrains IDE bug with Nuxt type resolution. You can check the JetBrains issue tracker for updates or try using VSCode as a workaround [Custom plugin in nuxt 3 has unknown type].

#

If these steps do not resolve the issue, the knowledge sources do not provide further troubleshooting specific to JetBrains IDEs.

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

#

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

quick olive Aug 15, 2025, 5:12 PM

#

@lean grotto i have a problem with nuxtjs/18In setup with nuxt 4 especially folder structure and config

lean grottoBOT Aug 15, 2025, 5:12 PM

#

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

#

If you are setting up @nuxtjs/i18n with Nuxt 4 and are unsure about the folder structure and configuration, here’s what the knowledge sources provide:

Folder Structure in Nuxt 4

Nuxt 4 introduces a new default folder structure. The main change is that your application code (like assets/, components/, composables/, layouts/, middleware/, pages/, plugins/, utils/, app.vue, and app.config.ts) should now be placed inside an app/ directory at the root of your project. Other folders like modules/, public/, server/, and content/ remain at the root level. The ~ alias now points to app/ by default, so ~/components resolves to app/components/ [New Directory Structure].

Example Nuxt 4 structure:

.output/
.nuxt/
app/
  assets/
  components/
  composables/
  layouts/
  middleware/
  pages/
  plugins/
  utils/
  app.config.ts
  app.vue
  router.options.ts
content/
modules/
public/
server/
nuxt.config.ts

Configuring @nuxtjs/i18n

To set up @nuxtjs/i18n in Nuxt 4:

Install the module:
```
npm install @nuxtjs/i18n
```

Add it to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [
      { code: 'en', name: 'English', language: 'en-US', dir: 'ltr' },
      { code: 'fr', name: 'French', language: 'fr-FR' },
      { code: 'fa', name: 'Farsi', language: 'fa-IR', dir: 'rtl' },
    ],
    strategy: 'prefix_except_default',
    defaultLocale: 'en',
  }
})

Place your nuxt.config.ts at the root of your project, not inside the app/ directory [I18n module integration].

#

Organize your translation files or content as needed.
If you use Nuxt Content, you can organize your content in language-specific folders (e.g., content/en/, content/fr/, etc.) [I18n module integration].

Key Points

All your main app code goes in the app/ directory.
Your nuxt.config.ts and public/, modules/, server/, and content/ folders stay at the root.
Configure @nuxtjs/i18n in nuxt.config.ts as shown above.

If you follow this structure and configuration, your Nuxt 4 project should work well with @nuxtjs/i18n. If you have a specific error or issue, please provide more details for targeted help.

For more details, see the Nuxt 4 upgrade guide and Nuxt Content i18n integration.

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

#

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

quick olive Aug 15, 2025, 5:18 PM

#

I dont use nuxt content i just want to know where to put locales and where to reference them ?
example step by step

#

@lean grotto I dont use nuxt content i just want to know where to put locales and where to reference them ?
example step by step

lean grottoBOT Aug 15, 2025, 5:18 PM

#

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

#

Certainly! Here’s a step-by-step guide for setting up @nuxtjs/i18n in Nuxt 4 without Nuxt Content, focusing on where to put your locale files and how to reference them, based strictly on the knowledge sources:

1. Where to Put Locale Files

Create a directory at the root of your project (not inside app/) for your locale files. A common convention is to use lang/ or locales/.
```
/lang
  en.json
  fr.json
  fa.json
```
This matches the examples in the knowledge sources, where langDir: "lang" is used to specify the directory for locale files [Localization of numbers and dates is not working in Nuxt3 + VueI18n Part 3].

2. How to Reference Locale Files in nuxt.config.ts

In your nuxt.config.ts (at the project root), configure the i18n module and reference your locale files using the langDir and locales options:
```
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    langDir: 'lang',
    locales: [
      { code: 'en', file: 'en.json', name: 'English' },
      { code: 'fr', file: 'fr.json', name: 'French' },
      { code: 'fa', file: 'fa.json', name: 'Farsi' }
    ],
    defaultLocale: 'en'
  }
})
```
- langDir tells Nuxt where to find your locale files.
- Each locale in the locales array references its file by name.
This setup is directly shown in the knowledge sources [Localization of numbers and dates is not working in Nuxt3 + VueI18n Part 3].

3. Summary of Steps

#

Create a lang/ (or locales/) folder at the root of your project.
Place your JSON locale files inside this folder.
Reference the folder and files in your nuxt.config.ts using langDir and the file property for each locale.

This approach is confirmed by the knowledge sources and is the recommended way to organize and reference locale files in a Nuxt 4 project using @nuxtjs/i18n (without Nuxt Content) [Localization of numbers and dates is not working in Nuxt3 + VueI18n Part 3].

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

#

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

quick olive Aug 15, 2025, 5:40 PM

#

@lean grotto when i switch languages it adds /fr to my url when i dont want that how do i remove it i want to switch locales without that

lean grottoBOT Aug 15, 2025, 5:40 PM

#

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

#

To prevent Nuxt I18n from adding the locale prefix (like /fr) to your URLs when switching languages, you need to change the strategy option in your i18n configuration. By default, strategies like prefix_except_default or prefix_and_default will add the locale code to the URL. To disable this behavior and have no prefix for any locale, set the strategy to 'no_prefix'.

Example:

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    // ...other options
    strategy: 'no_prefix',
    locales: [
      { code: 'en', file: 'en.json', name: 'English' },
      { code: 'fr', file: 'fr.json', name: 'French' }
    ],
    defaultLocale: 'en'
  }
})

This will allow you to switch locales without changing the URL structure or adding a language prefix. This configuration is shown in the knowledge sources, where the strategy: 'no_prefix' option is commented as a way to avoid URL prefixes for locales [Nuxt 3 i18n browser detection not working Part 6].

Summary:
Set strategy: 'no_prefix' in your Nuxt I18n config to prevent locale codes from appearing in your URLs when switching languages.

#I'm having issue getting type for cutsom fetch plugin

If you still encounter issues, make sure your plugin is loaded correctly and that your editor has picked up the new types (sometimes a restart or re-index is needed) Custom useFetch in Nuxt.

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

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

For more details, see the official docs: Auto-imports: Vue and Nuxt Composables.

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

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

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

If you follow these steps and still see the error, the knowledge sources do not provide further troubleshooting steps for this specific issue.

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

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

If you have done all of the above and still encounter the error, the knowledge sources do not provide further troubleshooting steps for this specific issue.

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

If these steps do not resolve the issue, the knowledge sources do not provide further troubleshooting specific to JetBrains IDEs.

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

Folder Structure in Nuxt 4

Configuring @nuxtjs/i18n

Key Points

For more details, see the Nuxt 4 upgrade guide and Nuxt Content i18n integration.

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

1. Where to Put Locale Files

2. How to Reference Locale Files in nuxt.config.ts

3. Summary of Steps

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

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