Nuxt 3 monorepo example -- Basic example
Tags: javascript, nuxt, beginners, tutorial
Published: 2023-12-28 20:15:06

> 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 ](https://nuxt.com/docs/getting-started/layers)* or *[Nuxt modules](https://nuxt.com/docs/api/kit/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

```sh
mkdir main-template

cd main-template
```

2. Start `pnpm` projects

```sh
pnpm init

# create the apps folder
mkdir apps


# create a workspace yml file 

touch pnpm-workspace.yaml

```

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

```sh

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:


```sh
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:

```json
{
  "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:

```sh

pnpm add nuxt3-local-shared-ui --filter main-app
```

Then we can extend the `nuxt.config.ts` and update the configuration:  

```js
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



```js
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](https://github.com/leamsigc/nuxt-monorepo-layers)



{% gist https://gist.github.com/leamsigc/68d3f891d9298c35de273caa2b21e453 %} 


[The Loop VueJs Podcast](https://podcasters.spotify.com/pod/show/the-loop-vuejs)