DEV Community

Cover image for Nuxt 3 monorepo example -- Basic example
Ismael Garcia
Ismael Garcia

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode
  1. Start pnpm projects
pnpm init

# create the apps folder
mkdir apps


# create a workspace yml file 

touch pnpm-workspace.yaml

Enter fullscreen mode Exit fullscreen mode
# update the pnpm-workspace.yaml

packages:
    - apps/*

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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"
}

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

export default defineNuxtConfig({

devtools: { enabled: true },

extends:['nuxt3-local-shared-ui']

})
Enter fullscreen mode Exit fullscreen mode

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' }

]

})
Enter fullscreen mode Exit fullscreen mode

Links:

Repo

The Loop VueJs Podcast

Top comments (8)

Collapse
 
jaroslavekarchiv profile image
jaroslavekarchiv

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

Collapse
 
leamsigc profile image
Ismael Garcia

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

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

Collapse
 
leamsigc profile image
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

Collapse
 
v0id-4lps profile image
v0id-4lps • Edited

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

Collapse
 
leamsigc profile image
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

Collapse
 
leamsigc profile image
Ismael Garcia

Any feedback is more than welcome!

Collapse
 
cnacorp profile image
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 ?

Collapse
 
leamsigc profile image
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