Nuxt 3 monorepo example -- Basic example

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:

1. Create the main folder and move to the created folder

mkdir main-template

cd main-template

1. 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:

1. 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:

1. 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?

1. 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:

1. Change the alias
2. Update the components' path
3. 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:

Repo

The Loop VueJs Podcast

Comments

[jaroslavekarchiv]

I tried the project. It's chaos. The github repo doesn't match the article.

[Ismael Garcia]

Here is a up to date layer that im working at the moment:

Trying to create template github.com/leamsigc/nuxt-monorepo-...

[Ismael Garcia]

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

[v0id-4lps]

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...

[Ismael Garcia]

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

[Ismael Garcia]

Any feedback is more than welcome!

[cnacorp]

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 ?

[Ismael Garcia]

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