Setting Up Monorepo with Yarn 2 with Vite (Vue3)

npm install -g @vue/cli
npm install -g yarn
npm install vue@next
mkdir vite_clone
cd vite_clone
yarn set version berry
yarn init -p
yarn add -D typescript
yarn dlx @yarnpkg/pnpify --sdk vscode

Add the workspaces directories to package.json (root)

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

Keep typing

mkdir packages
cd packages
yarn create @vitejs/app app
(select the vue-ts for Typescript)
cd app
yarn add -D typescript
yarn add -D sass
cd ..
mkdir common
cd common
yarn init -p
yarn add -D typescript
yarn add -D lodash-es
yarn add -D @types/lodash-es
mkdir src

Setting up the tsconfig.json for the common package (sample)
Warning : choose the same moduleResolution type for other packages

{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"declaration": true,
"outDir": "./dist",
"strict": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

Add the settings to package.json for the common package

"version": "0.0.0",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"build": "tsc"
},

Make a sample index.ts file in the src directory

import { concat } from 'lodash-es';
export const concatArray = function() {
return concat([1], [2]);
}

Go to the app directory and modify the App.vue temporarily

<script>
import {concatArray} from 'common';
export default {
setup () {
return {
array: concatArray(),
};
}
}
</script>
<template>
<h1>{{ array }}</h1>
</template>

Add the common package dependency for the app to the package.json

"dependencies": {
"common": "*",
"vue": "^3.0.5"
},

Exclude the common package in the vite.config.ts

optimizeDeps: {
auto: true,
exclude: [
'common'
],
},

Ctrl+Shift+P or F1 (Visual Studio code)
> Open default settings
> Add below settings as you wish

"vetur.validation.template": false, 
"vetur.validation.script": false, 
"vetur.validation.style": false,
"eslint.packageManager": "yarn", 
"prettier.packageManager": "yarn",
"npm.packageManager": "yarn",

Type the commands for the app

(in root dir)
yarn workspace common build
yarn workspace app build
yarn workspace app dev

Tips : Commands for workspaces (yarn — help)

yarn workspaces list
yarn workspace [workspace name] [command]