Giter VIP home page Giter VIP logo

nuxt-structure-with-modules's Introduction

๐Ÿ™‹๐Ÿฝโ€โ™‚๏ธ Domain-Driven Design & Nuxt - Using Nuxt Modules to structure large Nuxt Apps

โšก๏ธ Talk at NUXT NATION by Anton Reindl

In my talk in 2021, I introduced Domain Driven Design and talked about structuring apps according to domain modules. I and demonstrated how to use Nuxt 2 modules to create independent submodules including Vuex modules and routes.

The original Nuxt 2 example can be found in a legacy here.

๐Ÿš€ Nuxt 3

I reimplemented the example of "Anton's Biketours" in Nuxt 3. This example implements a fresh Nuxt 3 with an landing page ( pages/index.vue ) and one domain-module module, namely the blog-module imported from .modules/blog . The module has its own components, composable and pages folder to better separate the domain from the rest of the app.

I also recommend to look at the documentation.

Scope

npm install

Development

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Checkout the deployment documentation.

๐Ÿ“š Resources

  • Slides of this Talk
  • Blog post Domain-Driven Design in Nuxt Apps by Filip Rakowski
  • Recommended DDD-Books:
    • Domain-Driven Design: Tackling Complexity in the Heart of Software - by Eric Evans
    • Implementing Domain-Driven Design by Vaughn Vernon
    • Domain-Driven Design Distilled by Vaughn Vernon

nuxt-structure-with-modules's People

Contributors

areindl avatar crbroughton avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

nuxt-structure-with-modules's Issues

Automated tooling or way to auto adapt to this structure

Hi @areindl ,

Thank you for this sample.
I was wondering if there's a way where we can extend nuxt core so as to auto read our new dir structure?

Currently we need to define our strategy in a module's index.js, which seems a little overhead everytime we define a new module.

Nuxt 3 help

Great tutorial, and maybe the only one on the web. I'm studying DDD and looking for how to apply it with Nuxt 3. I still have many doubts, but here's one of them...

  • if I want to use global things, for example a validator.js, to check fields in a form, and reuse it in several modules, in which folder would I put it?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.