Home / Blog / Domain Driven Design With Nuxt Layers
Domain Driven Design With Nuxt Layers

Domain Driven Design With Nuxt Layers

Daniel Kelly
Daniel Kelly
April 29th 2024

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.

Start learning Vue.js for free

Daniel Kelly
Daniel Kelly
Daniel is the lead instructor at Vue School and enjoys helping other developers reach their full potential. He has 10+ years of developer experience using technologies including Vue.js, Nuxt.js, and Laravel.

Latest Vue School Articles

Master Vue.js 3: The Ultimate Guide for Building Real-World Apps in 2024

Master Vue.js 3: The Ultimate Guide for Building Real-World Apps in 2024

Unlock the secrets to master Vue.js 3 in 2024. Discover expert tips, best practices, and advanced techniques for building top-tier, real-world apps.
Mostafa Said
Mostafa Said
How to Structure a Large Scale Vue Application

How to Structure a Large Scale Vue Application

Organizing your Vue.js project to make it scalable is essential to success. In this article, learn some strategies for structuring your large scale Vue.js apps
Daniel Kelly
Daniel Kelly

Our goal is to be the number one source of Vue.js knowledge for all skill levels. We offer the knowledge of our industry leaders through awesome video courses for a ridiculously low price.

More than 120.000 users have already joined us. You are welcome too!

Follow us on Social

© All rights reserved. Made with ❤️ by BitterBrains, Inc.