Help with monorepo

[codanator]

hey,

i want to setup a monorepo (lerna) with vite and vue3 and i can´t find any working solutions.
The main problem is to consume the local repos in development and benefit from vites fast hot-reloading and all the other sugar it gives to us.
I played with optimizeDeps.link and rollup alias but cannot figure out an acceptable setup without hacky parts.

Can anyone please give an example how this is done right?

My folder structure looks like this:

project-root/
    lerna.json
    packages/
        example-ui/
            index.html
            vite.config.ts
            ....
        ui/
            modules/
                common/
                    src/comp.vue
                    package.json
                dashboard/
                    src/dashboard.vue
                    package.json
                .../

THX for the great work!

[yyx990803]

1. Make sure you have your local linked packages also listed in your example (vite) package's dependencies list
2. If listed, Vite 2 will auto detect linked packages and you shouldn't need to use optimizeDeps.link
3. If your ui module packages define entry points to built files in their package.json, you will need to configure an alias in the example project to redirect to their source entry instead.

We should probably provide some documentation for this. /cc @LinusBorg @csr632 @AlexandreBonaventure who I know have been using Vite in monorepos

[LinusBorg]

I'm running a monorepo with yarn workspaces - lerna is only used to run multiple commands in packages in parallel, pretty much).

I have aded the package(s) to the "example-ui" app's package.json, and yarn will add symlinks for them automatically. Then I also have set up aliases in the example app's vite config like this:

alias: {
    'ui-common': 'ui-common/src/common.vue',
    'ui-dashboard': 'ui-dashboard/src/dashboard.vue',
  },

This means that the example app is able to properly resolve the src entry point for each package, so you don't need to have a build process running for them to keep the /dist folders uptodate.

in my repo, all packages have entry files (src/index.ts), but it should work all the same if you link to a .vue file directly.

[AlexandreBonaventure]

I am using pretty much the same setup as @LinusBorg (every package as an entry file with a main field in the package.json). We are using yarn 2 but that should not matter really. With Vite v2 linked packages are automatically detected so it should work out of the box.
I would recommend you migrate to it already, if not you can use this kind of script in the config to automatically resolve your workspaces:

async function getWorkspaces () {
  const pkg = await fs.promises.readFile(path.resolve(process.cwd(), './package.json'), { encoding: 'utf-8' });
  try {
    const { dependencies } = JSON.parse(pkg);
    const qualified = Object.keys(dependencies).filter(depName => depName.startsWith('@your-organization-name'));
    return qualified;
  } catch (e) {
    console.error(e);
    return [];
  }
}

return {
  optimizeDeps: {
      link: getWorkspaces()
    }
}

[MatejBransky]

I'm experimenting with Vite.js and Yarn Worskpaces and it works quite well: https://github.com/MatejBransky/worskpaces-in-workspaces

Basically my app (examples/monorepo/app) loads my plugin which add aliases for all workspaces defined in root package.json (pkg.workspaces attribute) and aliases values are gathered from the workspaces pkg.source attributes.

It's really just an experiment

[csr632]

I have created a demo project for vite + monorepo:

• Use yarn workspace (lerna and pnpm can work similarly)
• Use Typescript(setup ts alias)

Project strusture:

• package.json
• packages
  • button
    • src
    • packges.json
  • demos
    • src (it import Button from 'button' and use it)
    • index.html
    • vite.config.ts
    • package.json
    • tsconfig.json

This is a valilla setup to show how to make vite wrok with monorepo. For a more smooth workflow for bigger project(more demos), checkout this demo project.

[miguelramos]

RFC

Hello guys, i'm coming to this thread referenced from #1554 where @yyx990803 call my attention to here. Would be great a cli tool to produce multi apps/libs and keep compatibility with vite-cli. Current i'm doing some research and prototyping with vite. Instead of using lerna (nothing against it, pretty good tool) but i would like to enrich vue/vite ecosystem with a tool more or less like nx.dev does to angular. I will leave here a idea spec for further discussion. This approach have some history (long a bit) that what i saw in many companies that follow lerna approach for multi vue apps and most of them regret on that decision.

[JkmAS]

Hi, I have a similar setup: monorepo using lerna + local packages with some vue 3 components & styles. No entry point in the local packages and they are listed in my app package.json.

Everything works pretty well, but I have some problem with local packages after vite build. For local development it works, but for vite build it just takes the components from local packages, but doesn't render them correctly. I've tried also yarn workspaces, same issue.

code in my app:

<script lang="ts">
import { defineComponent } from 'vue';
// local package
import Icon from 'local-package/Icon.vue';

export default defineComponent({
  name: 'Sidebar',
  components: {
    Icon,
  },
});
</script>

<template>
    <div class="sidebar">
        <a href="https://link.net">
          <Icon name="Logo" size="medium" />
        </a>
    </div>
</template>

result:

<div class="sidebar" data-v-1c836e6c="">
  <a href="https://link.net">
    <logo color="#00B6EB" name="icon" class="medium"></logo>
  </a>
</div>

but it should be

<div class="sidebar"  data-v-1c836e6c="">
  <a href="https://link.net">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
       <path fill-rule=...
    </svg>
  </a>
</div>

I can create a new issue for this, but I hope it's related to monorepo stuff. It's up to you. Thx

[AlexandreBonaventure]

@JkmAS I don't think it has something to do with monorepo. It looks like the component is not resolved correctly at runtime. Sometimes it happens when you have circular dependencies. You should probably create a reproduction if you want some help.

[zhengxs2018]

这是我的 monorepo 项目，目前遇到了一个问题，依赖的包里面的 .scss 文件 ， @import 时找不到模块，有谁知道这么处理么

https://github.com/zhengxs2018/vitejs-monorepo-fullstack

[threepointone]

Make sure you have your local linked packages also listed in your example (vite) package's dependencies list
If listed, Vite 2 will auto detect linked packages and you shouldn't need to use optimizeDeps.link

@yyx990803, I just made an example repo with 2 workspaces, with one one importing the other. I didn't have to list it in dependencies, and I didn't use optimizeDeps.link either. The import worked, as did react-refresh. I also don't see any documentation on the site for optimizeDeps.link either. Did something change in the last month that made this configuration unnecessary? Thanks!

[yyx990803]

@threepointone yeah, the internals changed quite a bit over the course of 2.0 beta and this thread is a bit out of date. optimizeDeps.link is no longer necessary, explicit dependencies should also be no longer necessary.

I guess I'll close this thread to avoid confusion for new users.

[pleunv]

Apologies for digging up a closed thread, but it already contains some monorepo examples so feels like the best place to do it.

I guess I'll close this thread to avoid confusion for new users.

This does confuse me a bit I'm afraid, and the documentation isn't entirely clearing it up for me either. Setting up a fully functional (developer friendly) development workflow for a monorepo is rather complicated, especially if you add TS in the mix. The fact that Vite seems to help out here is pretty awesome, I'm just wondering if my understanding is correct:

• You can import monorepo projects (by package name I presume?) without adding them as a dependency, in which case Vite will assume control over said project and compile it locally (and bundle its dependencies).
• You can still add monorepo projects as dependencies in package.json and link them (i.e. through yarn/npm/pnpm/lerna workspaces) in which case Vite will presumably not assume control over the project and its compilation?

If, in the first case, the imported project happened to be a Vite library-mode project with its own config (and plugins), would this still be respected during compilation, or would the consumer config and plugins be used instead?

Lastly, do we know of any example/open-source projects that happen to be running a (non-trivial) monorepo Vite setup?

edit: @LinusBorg's vue-lib-monorepo-template is a good starting point 🙂

[LinusBorg]

Fair warning: I'm still tinkering with this. But it's been working good-ish so far.

[adiun]

In case it helps others, I put together an example monorepo using Vite and npm 7 workspaces (I recently removed lerna on our team in favor of npm 7 workspaces).

There's some other features here I needed like TS Project Reference integration, React component library support, and Storybook integration -

https://github.com/adiun/vite-monorepo