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