Nuxt•3mo ago

Plugins don't load

I've put my app into src directory for organization, and put plugins in and they didn't load. I did do

  // source directory
  srcDir: "src/",

  // source directory
  srcDir: "src/",

In nuxt.config.ts Plugin is called 01.database.server.ts and I have

import { databaseConfig } from "~/config/database.config";

export default defineNuxtPlugin(async () => {
  try {
    console.log("Starting database connections...");

    await connectToMongoDB({
      uri: databaseConfig.mongodb.uri,
    });

    await connectToRedis({
      host: databaseConfig.redis.host,
      port: databaseConfig.redis.port,
      password: databaseConfig.redis.password,
      db: databaseConfig.redis.db,
    });

    await connectToElasticsearch({
      node: databaseConfig.elasticsearch.node,
      auth: databaseConfig.elasticsearch.auth,
      ssl: databaseConfig.elasticsearch.ssl,
    });

    const mongoStatus = getMongoConnectionStatus();
    const redisHealthy = await checkRedisHealth();
    const esHealthy = await checkElasticsearchHealth();

    console.log("Database connections started:", {
      mongodb: mongoStatus,
      redis: redisHealthy,
      elasticsearch: esHealthy,
    });
  } catch (error) {
    console.error("Failed to start database connections:", error);
  }
});

import { databaseConfig } from "~/config/database.config";

export default defineNuxtPlugin(async () => {
  try {
    console.log("Starting database connections...");

    await connectToMongoDB({
      uri: databaseConfig.mongodb.uri,
    });

    await connectToRedis({
      host: databaseConfig.redis.host,
      port: databaseConfig.redis.port,
      password: databaseConfig.redis.password,
      db: databaseConfig.redis.db,
    });

    await connectToElasticsearch({
      node: databaseConfig.elasticsearch.node,
      auth: databaseConfig.elasticsearch.auth,
      ssl: databaseConfig.elasticsearch.ssl,
    });

    const mongoStatus = getMongoConnectionStatus();
    const redisHealthy = await checkRedisHealth();
    const esHealthy = await checkElasticsearchHealth();

    console.log("Database connections started:", {
      mongodb: mongoStatus,
      redis: redisHealthy,
      elasticsearch: esHealthy,
    });
  } catch (error) {
    console.error("Failed to start database connections:", error);
  }
});

I'm new to Nuxt, and switching from NextJS

8 Replies

kapa.ai•3mo ago

Hi @Sovereign. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- When using a custom source directory in Nuxt (e.g., srcDir: "src/"), Nuxt expects your main app directories (like plugins/, pages/, etc.) to be inside the src/ folder, not at the project root. So, your plugins/ directory should be at src/plugins/01.database.server.ts if you have set srcDir: "src/" in your nuxt.config.ts file. If your plugins are in the correct place and still not loading, here are some things to check: 1. Plugin Location: Make sure the plugin file is at src/plugins/01.database.server.ts (not at the root or in a subdirectory unless you explicitly register it in nuxt.config.ts) srcDir docs, plugins directory docs. 2. File Naming: The .server.ts suffix is correct if you want the plugin to run only on the server side. 3. Auto-registration: Plugins at the top level of the plugins/ directory are auto-registered. If your plugin is in a subdirectory, you must add it to the plugins array in nuxt.config.ts plugins directory docs. 4. Plugin Format: Your plugin code uses the correct Nuxt 3 format with defineNuxtPlugin creating plugins. 5. Restart the Dev Server: Sometimes, after adding new plugins, you need to restart the Nuxt dev server for them to be picked up, especially if you’re using server plugins or making structural changes GitHub issue. 6. Check for Errors: If there are errors in your plugin (e.g., import errors, runtime exceptions), Nuxt might silently fail to load it. Check your terminal and browser console for any error messages. Summary of what to do: - Ensure your plugin is at src/plugins/01.database.server.ts. - Restart your dev server after adding the plugin. - Check for any errors in the console. If you follow these steps and the plugin still doesn't load, please double-check the exact file path and naming, and ensure there are no typos or import errors. If your plugin is in a subdirectory, register it explicitly in nuxt.config.ts as shown in the docs. Let me know if you need more help! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

SovereignOP•3mo ago

@kapa.ai I do have it like that, and I did restart dev mode. I only get

 
[@nuxt/content 12:34:34 PM]  WARN  No content configuration found, falling back to default collection. In order to have full control over your collections, create the config file in project root. See: https://content.nuxt.com/docs/getting-started/installation

  ➜ DevTools: press Shift + Alt + D in the browser (v2.6.2)                                                                           12:34:34 PM

✔ Processed 2 collections and 0 files in 198.43ms (0 cached, 0 parsed)                                                 @nuxt/content 12:34:35 PM
ℹ Nuxt Icon server bundle mode is set to local                                                                                       12:34:35 PM
✔ Vite client built in 24ms                                                                                                          12:34:36 PM
✔ Vite server built in 421ms                                                                                                         12:34:36 PM
✔ Nuxt Nitro server built in 558ms                                                                                             nitro 12:34:37 PM
ℹ Vite client warmed up in 2ms                                                                                                       12:34:37 PM
ℹ Vite server warmed up in 418ms                                                                                                     12:34:37 PM

 
[@nuxt/content 12:34:34 PM]  WARN  No content configuration found, falling back to default collection. In order to have full control over your collections, create the config file in project root. See: https://content.nuxt.com/docs/getting-started/installation

  ➜ DevTools: press Shift + Alt + D in the browser (v2.6.2)                                                                           12:34:34 PM

✔ Processed 2 collections and 0 files in 198.43ms (0 cached, 0 parsed)                                                 @nuxt/content 12:34:35 PM
ℹ Nuxt Icon server bundle mode is set to local                                                                                       12:34:35 PM
✔ Vite client built in 24ms                                                                                                          12:34:36 PM
✔ Vite server built in 421ms                                                                                                         12:34:36 PM
✔ Nuxt Nitro server built in 558ms                                                                                             nitro 12:34:37 PM
ℹ Vite client warmed up in 2ms                                                                                                       12:34:37 PM
ℹ Vite server warmed up in 418ms                                                                                                     12:34:37 PM

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the information in the knowledge sources, if your plugin is located at src/plugins/01.database.server.ts, and you have set srcDir: "src/" in your nuxt.config.ts, Nuxt should automatically detect and load your plugin without needing to add it to the plugins array in your config, as long as it is at the top level of the plugins/ directory and not in a subdirectory. The .server.ts suffix is correct for server-only plugins plugins directory docs. However, if you are not seeing any output from your plugin (such as your console.log statements), and there are no errors in the terminal or browser console, the knowledge sources do not provide a specific reason for this behavior. They do mention that after adding new plugins, especially server plugins, you may need to restart the dev server for them to be picked up GitHub issue. You have already done this. If your plugin is not in a subdirectory and you have restarted the dev server, but it still does not load, the knowledge sources do not contain enough information to diagnose the issue further. There is no mention of additional logging or debugging steps for this scenario in the provided documentation. If you continue to experience this issue, you may want to check for typos in the file name or path, or try creating a minimal plugin (e.g., just a console.log('plugin loaded')) to see if any plugin is loaded at all. If not, there may be a deeper configuration or environment issue not covered in the knowledge sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

SovereignOP•3mo ago

@kapa.ai Nevermind, I figured it out, I had to actually open the site for that to work... Interesting... Does that get solved on production build?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, this is expected behavior in Nuxt during development. Server-side plugins (including those in src/plugins/*.server.ts) and the Nitro server itself are only initialized when an actual HTTP request is made—such as when you open the site in your browser. This is because the server process (and thus your plugin code) only runs in response to incoming requests, not just when the dev server starts Nuxt Lifecycle: Server. In a production build, the behavior is similar: the server (or serverless function) will only execute your server-side code when a request is received. So, your plugin will run as soon as a user visits the site or an API endpoint is called. There is no "pre-warming" of plugins before the first request in either development or production—this is by design for efficiency and resource management. If you want to ensure certain initialization happens before any requests are served (for example, database connections), you should keep that logic in your server plugin as you have done. Just be aware that it will only execute when the server handles its first request Server Plugins. If you need to "warm up" your server in production (e.g., to avoid cold starts in serverless environments), you may need to trigger an initial request yourself after deployment, but this is outside the default Nuxt behavior and not covered in the provided documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

Gaming

Programming

Plugins don't load

Did you find this page helpful?