Creating a Nuxt.js project with Yarn workspace/Lerna Monorepo In 3 Steps

In this article, I’ll show you how to keep your Nuxt application minimal and avoid ending up with a large messy project, even though you can save your large scale project in this case.

This is result a Nuxt project without splitting by multi app

The problem

You can see our problem in above picture. When you start to use Nuxt.js Maybe you never think about your final build result ,So I brought it for you in this article, this is a project with many features.

The solation

keep your app minimal.

BUT HOW???!!!!

Ok let’s show you how to config your large application in Nuxt.js

There are 3 steps needed to run this app rightly:

1- config yarn workspace and lerna.

2- install your Nuxt app.

3- share your common config and component.

1- config yarn workspace and lerna.

create an empty workspace with the name nuxt-multi-app or anything else and run this command

yarn config set workspaces-experimental true
yarn init -y

Then you see something like this in your package.json

{
  "name": "nuxt-multi-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

And add lerna.js to dev dependency

yarn add lerna --dev

And then you need to add a new config here for Yarn workspace, first, initialize config Lerna.

lerna init

Now you will see new directory the name of packages and new file config lerna.json we should add new config for this step. Set this config for lerna.json

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "yarn",
  "useWorkspaces": true
}

And add this config in your package.json root

  "private": true,
  "workspaces": [
    "packages/*"
  ],

The final package.json

{
  "name": "nuxt-multi-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "devDependencies": {
    "lerna": "^4.0.0"
  }
}

so let’s go next step.

2- install your Nuxt app.

create a new directory inside packages by name system-design

And run this command in system-design add new package.json

yarn init -y

And will see new package.json

{
  "name": "system-design",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

edit name value package.json to @app/system-design

Ok this time we should start create Nuxt project by this way in directory system-design

Installation

But here we should install Nuxt in globally for my all packages.

First go to root directory and then add run this command

yarn add -W nuxt

Adding the -W flag makes it explicit that we’re adding the dependency to the workspace root.

Next go to directory system-design and nuxt.config.js and config for this by:

export default {
    modulesDir: ['../../node_modules'],
}

“modulesDir ” is good option for this case look this:

The modulesDir Property

Finally for this step should run system-design and add this to package.json system-design

{
  "name": "system-design",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "nuxt"
  }
}

And run in from system-design

yarn dev

Or from root directory run

yarn workspace @system-design dev

And you will see your log console runner.

Listening: http://localhost:3000/

And this step is done.

3- share your common config and component.

First do all config for a new directory by the name public

Then here we should have 2 package system-design and public

and each package has own package.json by the name like

@app/system-design

@app/public

create a simple component in system-design and then add package

"dependencies": {
    "@app/system-design": "^1.0.0"
 }

by this command 😎😎

lerna add @app/system-design --scope=@app/public

after that public/package.json should be like this

{
    "name": "@app/public",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "scripts": {
        "dev": "nuxt"
    },
    "dependencies": {
        "@app/system-design": "^1.0.0"
    }
}

Next for install modules inside nuxt config we most add alias add this object in nuxt.config.js

alias: {
'@design-system': resolve(__dirname,'../../node_modules/@app/system-design'),
}

So now we can import component @app/system-design by this way

import yourNameComponet from "@system-desig/xxx-xxx"

And Well done!!!😉

You can find final demo for check and stars⭐ in this repository

Resource

5 Tips for Sharing code between NuxtJS Projects

A Workflow Guide for Lerna with Yarn Workspaces

Sharing reusable Vue.js components with Lerna, Storybook, and npm or GitHub Package Registries

As soon as possible, the following piece will be written.

1- config build and deployment by Pm2

2- config tailwind.css in this case project.

3- tell me in comment 😎😎.

You can read this about debug nuxt.js project here 😉😉.

Debug Front/Vue.js/Nuxt.js in production