├── .env ├── .npmrc ├── packages ├── app │ ├── .env │ ├── server │ │ └── tsconfig.json │ ├── public │ │ └── favicon.ico │ ├── tsconfig.json │ ├── nuxt.config.ts │ ├── app.vue │ └── package.json └── ui │ ├── constants │ └── message.ts │ ├── tsconfig.json │ ├── components │ ├── TheTestDirective.vue │ └── TheMessage.vue │ ├── utils │ └── vTest.ts │ ├── nuxt.config.ts │ └── package.json ├── pnpm-workspace.yaml ├── .gitignore ├── package.json └── README.md /.env: -------------------------------------------------------------------------------- 1 | NUXT_PUBLIC_API_BASE=root -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /packages/app/.env: -------------------------------------------------------------------------------- 1 | NUXT_PUBLIC_API_BASE=app -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - packages/* 3 | -------------------------------------------------------------------------------- /packages/ui/constants/message.ts: -------------------------------------------------------------------------------- 1 | export const message = 'ui message' -------------------------------------------------------------------------------- /packages/app/server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.nuxt/tsconfig.server.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/serkodev/nuxt-monorepo/HEAD/packages/app/public/favicon.ico -------------------------------------------------------------------------------- /packages/app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /packages/ui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /packages/ui/components/TheTestDirective.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /packages/ui/utils/vTest.ts: -------------------------------------------------------------------------------- 1 | import type { Directive } from 'vue' 2 | 3 | export default { 4 | created: (el) => { 5 | console.log('v-test', el) 6 | }, 7 | } as Directive 8 | -------------------------------------------------------------------------------- /packages/ui/components/TheMessage.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /packages/ui/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | import { createResolver } from '@nuxt/kit' 2 | const { resolve } = createResolver(import.meta.url) 3 | 4 | export default defineNuxtConfig({ 5 | alias: { '~ui': resolve('./') }, 6 | components: [ 7 | { path: '~ui/components', prefix: 'Ui' } 8 | ], 9 | }) 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Nuxt dev/build outputs 2 | .output 3 | .data 4 | .nuxt 5 | .nitro 6 | .cache 7 | dist 8 | 9 | # Node dependencies 10 | node_modules 11 | 12 | # Logs 13 | logs 14 | *.log 15 | 16 | # Misc 17 | .DS_Store 18 | .fleet 19 | .idea 20 | 21 | # Local env files 22 | .env.* 23 | !.env.example 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-monorepo", 3 | "scripts": { 4 | "packages": "dotenv -- pnpm --filter", 5 | "app": "pnpm packages @nuxt-monorepo/app", 6 | "dev": "dotenv -- pnpm -r dev", 7 | "build": "dotenv -- pnpm -r build" 8 | }, 9 | "devDependencies": { 10 | "dotenv-cli": "^7.3.0" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/app/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | devtools: { enabled: true }, 4 | extends: ["@nuxt-monorepo/ui"], 5 | runtimeConfig: { 6 | public: { 7 | apiBase: '', // can be overridden by NUXT_PUBLIC_API_BASE environment variable 8 | } 9 | }, 10 | }) 11 | -------------------------------------------------------------------------------- /packages/app/app.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 19 | -------------------------------------------------------------------------------- /packages/ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nuxt-monorepo/ui", 3 | "private": true, 4 | "type": "module", 5 | "main": "./nuxt.config.ts", 6 | "scripts": { 7 | "build": "nuxt build", 8 | "dev": "nuxt dev", 9 | "generate": "nuxt generate", 10 | "preview": "nuxt preview", 11 | "postinstall": "nuxt prepare" 12 | }, 13 | "devDependencies": { 14 | "@nuxt/devtools": "latest", 15 | "nuxt": "^3.8.2", 16 | "vue": "^3.3.10", 17 | "vue-router": "^4.2.5" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nuxt-monorepo/app", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "build": "nuxt build", 7 | "dev": "nuxt dev", 8 | "generate": "nuxt generate", 9 | "preview": "nuxt preview", 10 | "postinstall": "nuxt prepare" 11 | }, 12 | "devDependencies": { 13 | "@nuxt-monorepo/ui": "workspace:^", 14 | "@nuxt/devtools": "latest", 15 | "nuxt": "^3.8.2", 16 | "vue": "^3.3.12", 17 | "vue-router": "^4.2.5" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nuxt Monorepo Demo 2 | 3 | This project demonstrates how to use [Nuxt Layers](https://nuxt.com/docs/getting-started/layers) to build a complete monorepo architecture. You can also browse different [branches](https://github.com/serkodev/nuxt-monorepo/branches) to understand various application scenarios. 4 | 5 | Welcome to read this [blog post](https://serko.dev/post/nuxt-3-monorepo) to learn about the details of the entire architecture of this repo. 6 | 7 | ## Setup 8 | 9 | ```bash 10 | pnpm install 11 | ``` 12 | 13 | ## Development 14 | 15 | ```bash 16 | # all packages 17 | pnpm dev 18 | 19 | # app only 20 | pnpm app dev 21 | ``` 22 | 23 | ## Production 24 | 25 | ```bash 26 | # all packages 27 | pnpm build 28 | 29 | # app only 30 | pnpm app build 31 | ``` 32 | --------------------------------------------------------------------------------