Nuxt Modules autoSetupDir

[harlan-zw]

Background

When creating Nuxt modules, it's common to keep a consistent directory structure for your files.

For the runtime directory, the convention is to follow paths similar to how you would set up a Nuxt app.

src/
  module.ts
  runtime/
    components/
        Foo.vue
    composables/
       useFoo.ts
    server/
      api/
        endpoint.ts  

To register the above, we need to do something like the following:

addServerHandler({
  route: '/api/__my_module__/endpoint',
  handler: resolve('./runtime/server/api/endpoint'),
})

addImports({
  name: 'useFoo',
  from: resolve('./runtime/composables/useFoo'),
})

addComponent({
  name: 'Foo',
  filePath: resolve('./runtime/components/Foo'),
})

As you can see, compared to the Nuxt DX itself, this is quite tedious and verbose.

There are also some other concerns with this approach:

• Module consistency

Having the freedom to modify Nuxt however you want in a module is powerful and it shouldn't change.

But for many modules, sticking with whatever the convention is makes life easier for the author and the end-user. As it stands though, there is little in the way of guide-rails to make sure you're following the conventions.

• Code Duplication

The Nuxt core does not strictly use the kit utilities, this leads to duplicate code that has slightly different behavior. One example is file name modifiers which don't work with the addComponent utility.

Proposal

We introduce a @nuxt/kit function autoSetupDir that will load the entire contents of the runtime folder automatically, following the same behavior as the Nuxt core.

This is strictly opt-in to avoid potential breaking changes. In this, we also introduce the convention of an app folder for modules (TBC) that wish to use this feature.

export default defineNuxtModule<ModuleOptions>({
  setup() {
    autoSetupDir(resolve('app'))
  }
}

Where appropriate we use namespaces automatically, setting a convention.

Consider the directory structure below:

src/
  module.ts
  runtime/
  app/
    components/
        Foo.vue
    composables/
       useFoo.ts
    server/
      api/
        endpoint.ts  

The server API endpoint would be set up as:

/api/__nuxt-my-module__/endpoint

Further considerations may need to be made for other folders such as pages, plugins, server, etc.

Final remarks

A simple version of this could be implemented fairly straight forward leveraging existing kit utilities.

Ideally, though, we'd share the logic that the Nuxt core uses to scan and load in these directories. This would mean layers, modules and Core Nuxt would all be using the same logic. This is a much larger piece of work though and may not make sense to try and tackle initially.

[angelhdzmultimedia]

Can anyone confirm if these are the tools Nuxt currently use to load packages? To me it looks like they are and looks cool!

https://github.com/nuxt/nuxt/blob/main/scripts/_utils.ts

[angelhdzmultimedia]

Any updates? 👀