nuxt-domain-driven

Just another directory structure for nuxt

Downloads
845
Stars
3
Committers
1

@huang-julien/nuxt-domain-driven

A hyper opiniated module for another nuxt directory structure.

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-domain-driven

Feature

This modules augment the architecture of nuxt.

It will read the domainDirectory (src by default) and auto-import files in each directories following the nuxt directory structure.

directories

  • components
  • composables
  • pages
  • utils

Prefix

Components

Components name are prefixed with the Domain's name. For example:

src/Marketing/components/SomeComponent.vue

<template>
  <MarketingSomeComponent />
</template>

Pages

Pages paths are prefixed with the domain's name. For example:

The route of src/Payments/pages/some-page.vue will be /Payments/some-page.

If you need to map the name to another path, you can use domains.domainPathAlias.

When defining

export default defineNuxtModule({
  modules: ["@huang-julien/nuxt-domain-driven"],
  domainDrivenConfig: {
    domains: {
      domainPathAlias: {
        Payments: "/p",
      },
    },
  },
});

src/Payments/pages/some-page.vue will be accessible at /p/some-page

Contribution

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release