Why a Monorepo?
From my point of view if you are planing a real project, it is better to have a Monorepo from the ground up.
- Large projects can consist of different modules
- Each module can be updated separately, and it is easier to maintain in the
- The Development Experience is better and is more flexible
What tool is going to be used for the Monorepo?
From personal experience, pnpm
workspace is one of the best tools in the market and is basically the same as npm
, so there is no additional training needed to use pnpm
.
From the Nuxt side what we can use?
We can use Nuxt layers or Nuxt modules
Nuxt layer's? What type of Mexican food is that?
Nuxt Layers
The layers' structure is almost identical to a standard Nuxt application. This makes it easy to create and maintain each layer.
Nuxt Modules
Nuxt modules come with a variety of powerful APIs and patterns, allowing them to alter a Nuxt application in many ways.
So letโs start creating a new project:
- Create the main folder and move to the created folder
mkdir main-template
cd main-template
- Start
pnpm
projects
pnpm init
# create the apps folder
mkdir apps
# create a workspace yml file
touch pnpm-workspace.yaml
# update the pnpm-workspace.yaml
packages:
- apps/*
We have the main folder and the necessary parts, now next step:
Setting up the shared UI Module:
- Create a basic Nuxt project for the UI Module
npx nuxi init --template layer ./apps/nuxt3-local-shared-ui
Small note: Sometimes you will receive an error message while using node version 20.*
So far, we have our basic share layer. Now let's go to the next step:
Setting up the main application:
- Create the main application:
pnpm dlx nuxi@latest init ./app/main-app
Now, how can I start all the layers or modules in this project at the same time?
How to start all the modules in our project now?
- We need to edit the
package.json
file in the main directory:
{
"name": "main-repo",
"version": "1.0.0",
"description": "Basic template for a monorepo",
"scripts": {
"packages": "pnpm --filter",
"app": "pnpm packages main-app",
"start": "pnpm --stream -r run dev",
"dev": "pnpm -r dev",
"build": "pnpm -r build",
"clean": "pnpm -r run clean"
},
"keywords": [],
"author": "Leamsigc",
"license": "ISC"
}
Then we can run the pnpm start
. This will start all the dev
instances of our packages.
Good I have the monorepo, but how do I link one layer to the main project?
How to link our module to the main project:
After we set up the modules that will be shared between applications, they can be linked by:
pnpm add nuxt3-local-shared-ui --filter main-app
Then we can extend the nuxt.config.ts
and update the configuration:
export default defineNuxtConfig({
devtools: { enabled: true },
extends:['nuxt3-local-shared-ui']
})
Small bonus changes that I recommend in my projects:
- Change the alias
- Update the components' path
- Add prefix to the components
import { createResolver } from '@nuxt/kit'
const { resolve } = createResolver(import.meta.url)
export default defineNuxtConfig({
devtools: { enabled: true },
alias: { '@': resolve('./') },
components: [
{ path: '@/components', prefix: 'Ui' }
]
})
Links:
Top comments (8)
I tried the project. It's chaos. The github repo doesn't match the article.
Here is a up to date layer that im working at the moment:
Trying to create template github.com/leamsigc/nuxt-monorepo-...
You're right the repo don't reflect the tutorial, because the repo was a experiment to set up some personal project, but i will update the article to point to the right repo
I agree! Nuxt3 Layers docs and tutos are hell! Unclear af
I try to setup layers for WEEKS and nothing work.
I don't want monorepo because I need to reuse my layers in several projects.
Unable to find a working solution...
Here is a working layer exmaple If you want to have a look at
github.com/leamsigc/nuxt-monorepo-...
Im working on it to be full stack template but open source
Any feedback is more than welcome!
Great article!. the only problem on my side is that this command "pnpm add nuxt3-local-shared-ui --filter main-app" doesn't really work. in my dependencies package.json, there is no version for this package, so in nuxt.config.ts, I need to specify the path:
module: ['../../packages/nuxt3-local-shared-ui'].
Do you know what's the reason ?
You can have a look at my current repo that is currently working github.com/leamsigc/nuxt-monorepo-...
Is aim to be a starter sass template