Need help in setting up a frontend monorepo for vue and nuxt using yarn workspaces and lerna

Viewed 1677

I'm trying to setup a monorepo for a frontend project using yarn workspaces and lerna. There will be a shared component library for all the app packages in it.

The project structure looks something like this:

root
├── lerna.json
├── package.json
└── packages
   ├── ui-library
   │   ├── src/main.js
   │   ├── dist/library.common.js  
   │   └── package.json
   └── app

When I import the ui-library in my app it gives me all sorts of lint errors.


packages/ui-library

  1. is a regular vue project created by @vue/cli.

    vue create ui-library

  2. exposes the auto generated component src/App.vue from src/main.js

    export { default as App } from './App'

  3. I've added a script to build the project as a library

    vue-cli-service build --target lib --name library src/main.js

  4. The build script generates dist/library.common.js along with other stuff.

In the ui-library/package.json,

{
  "name": "@<org>/ui-library",
  "version": "0.0.1-alpha",
  "private": true,
  "main": "./dist/library.common.js",
  "scripts": {
    "build": "vue-cli-service build --target lib --name library src/main.js",
  },
  .
  .
  .
}

packages/app

  1. It's a nuxt project created by npx create-nuxt-app app.

  2. I've installed the local ui-library package like this

    yarn workspace app add @<org>/ui-library@0.0.1-alpha

It finishes successfully.

I haven't done anything here other than importing the App component in pages/index.vue like this

<template>
  <app />
</template>

<script>
import { App } from '@<org>/ui-library'

export default {
  components: {
    App
  }
}
</script>

But the app fails to run because of lint errors.

$ yarn workspace app dev
.
.
app: path\to\packages\ui-library\dist\library.common.js
app:    88:10  error  Unexpected newline between function and ( of function call
                                  no-unexpected-multiline
app:    97:42  error  '_unused_webpack_default_export' is assigned a value but never used
                                  no-unused-vars
app:   102:17  error  'module' is defined but never used
                                  no-unused-vars
.
.
app:    97:42  error  '_unused_webpack_default_export' is assigned a value but never used
                                  no-unused-vars
app:   102:17  error  'module' is defined but never used
                                  no-unused-vars'HelloWorldvue_type_style_index_0_id_b9167eee_scoped_true_lang_css_' is assigned a value but never used  no-unused-vars
app:   449:5   error  'Appvue_type_style_index_0_lang_css_' is assigned a value but never used                                 no-unused-vars
app: ✖ 17 problems (17 errors, 0 warnings)
app:   1 error and 0 warnings potentially fixable with the `--fix` option.

What's the way of ignoring these lint errors or is my approach incorrect? Any help will be much appreciated. Thanks in advance.

1 Answers

Now instead of shared components library, the application is divided into modules (read DDD). Each module is responsibility of a developer or a team and whatever needs to be shared is done using module federation.

Related