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