Domain Driven Design With Nuxt Layers

Intro to Domain Driven Design

Domain driven design is an approach to organizing your codebase based on business concerns instead of types of code. For example, if I were building a blogging application I might group everything related to users in one folder, everything related to posts in another folder, and everything related to comments in another folder.

Compare that with mixing up my user components, posts components, and comments components all in a single components directory. And likewise for stores, pages, composables, helper functions, etc.

Filip Rakowski wrote a great article on the Vue School blog in 2020 about exactly this subject. However, at the time Nuxt 3 layers (and Nuxt 3 itself) weren’t a thing. So let’s see how easy Domain Driven Design is with Nuxt layers.

(Note that the term “domain” in this case has nothing to do with the TLD you register with your domain registrar like godaddy.com. Instead it refers to the “logical concern” or business object like posts, users, comments, etc).

Nuxt Layers

First of all, what are Nuxt layers. According to their website, Nuxt layers are “a powerful system that allows you to extend the default files, configs, and much more.” Essentially, we can create “mini Nuxt projects” (layers) whose file structure resembles that of a Nuxt project’s root directory and then have each of those “mini Nuxt projects” merged with our main project.

For example, I could create a directory /domains/users in my Nuxt project and store all my code related to the application users there. Within this directory I can use the same directory structure that I’m already familiar with, like components, composables, pages, etc.

You should also provide a nuxt.config.ts file within the layer. It could be an empty config, if you just want Nuxt to use it’s file based magic to auto load your components, etc.

export default defineNuxtConfig({});

Or you can even provide settings normally set directly in the root nuxt.config.ts and they will be merged into the root config. This is great if you have some nuxt config settings to set that are specific to the current layers domain (ie users). For example:

export default defineNuxtConfig({
  routeRules:{
    // some rule that only applies to users pages
    // maybe redirect /profiles to /users
    "/profiles" : { redirect: "/users" }
  }
});

That directory structure of /domains/users/ would end up look something like this.

/my-nuxt-project
    /nuxt.config.ts
    /pages
    ... all the other root nuxt directories
    /domains/users  👈 the juicy stuff!
        /components
        /composables
        /utils
        /server
        /pages
        nuxt.config.ts

Finally, so that my real project knows that it should merge my users layer into the main application code, I need to register the layer in my the root nuxt.config.ts file.

// /nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  extends: ["./domains/users"],
});

And that’s it! Now all my user components are auto imported, etc. Most importantly everything related to the users of my application are organized into one place.

You could continue to do this for all of your different domains: posts, comments, etc.

If you want to see an example of what that might look like, checkout this example project on StackBlitz.

Nuxt Modules

Nuxt layers are powerful but combined with custom modules you can take Domain Driven Design to the max. For example, notice in the example stackblitz project, in order to get the routes right we still had to nest a users and posts directory within our pages directory of each layer. It’s a little redundant like this:

• /domain/users/pages/users
• /domain/users/pages/posts

We won’t endeavor write the code for that in this short article but it’s certainly possible! Let us know on Twitter if you’d like us to examine this further and we’ll give it a shot 🙂. Or if you come up with a solution for this yourself, we’d love to see it!

Also, if you’d like to learn what all is possible with custom Nuxt modules, how they might contribute to Domain Driven Design, and how to create your own custom modules, checkout our course: Nuxt Modules the Ultimate Guide.

Domain Driven Design

In conclusion, domain driven design (DDD) is a great organizational tool for your Nuxt codebase. Combining the power of Nuxt layers and Nuxt modules you can come up with a robust and intuitive DDD system for your apps.