Vetur: Multi root support

Created on 11 Sep 2017  ·  24Comments  ·  Source: vuejs/vetur


Issuehunt badges

Explore support for VSCode's new Multi-root workspace feature.
Notably, rootPath now can be a list.

https://github.com/Microsoft/vscode/wiki/Extension-Authoring:-Adopting-Multi-Root-Workspace-APIs

This is somewhat different from #385, depending on the way the user uses VSCode.
For the following app,

/app
  /client
  /server
  /doc
  • One might open /app in one Window. Vetur support for /client is #385.
  • One might open /app/client, /app/server as two top-level folders. That's this issue.
  • One might open two Vue apps as two top-level folders. That's this issue.



IssueHunt Summary

Backers (Total: $250.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips


Funded on Issuehunt feature-request
Source
picture octref
👍87 👀10

Most helpful comment

Any action on this? It's been more than a year and this is still broken.

picture RobertWHurst on 12 Dec 2019
👍21

All 24 comments

If you need any testing, I have a use case explained here: https://github.com/vuejs/vetur/issues/423#issuecomment-369009195. I'll be happy to test any progress on this feature.

alexsasharegan picture alexsasharegan on 28 Feb 2018

One workaround could be found here: https://github.com/vuejs/vetur/issues/423#issuecomment-384255018.

evenfrost picture evenfrost on 25 Apr 2018

I had issues where this and vscode-jest both wanted to be the first (root) folder. Fixed things to some extent - quick and dirty fix adding multi-root support for Vetur lives here: https://github.com/brandonson/vetur

Clone to your extensions dir and follow setup from Vetur's CONTRIBUTING.md. After the compile step you should be good to go.

It is, as mentioned, a quick dirty fix that iterates through the workspace folders looking for a package.json with vue as a dependency. It won't work for newly added folders (you'll need to restart vscode) and it won't handle the case of two vue workspaces. I'll probably try to clean it up and maybe get to a PR eventually, but time constraints mean that's not at the top of my list right this moment - that, and I don't know how this should interact with the centralization from #800.

Edit to add: See the basic-multiroot branch. Master contains the early hack, basic-multiroot is much better.

brandonson picture brandonson on 22 Oct 2018
👍6

Any action on this? It's been more than a year and this is still broken.

RobertWHurst picture RobertWHurst on 12 Dec 2019
👍21

I have a monorepo project with one of the packages being a vue client project with vuetify dependency.
I'm using yarn workspaces.
The structure is like so:

<root>
├── node_modules
│   ├── vue
│   ├── vue-apollo
│   ├── vue-router
│   ├── vuetify
│   ├── vuex
│   ├── [...]
├── package.json
├── packages
│   ├── my-vue-app
│   │   ├── babel.config.js
│   │   ├── node_modules
│   │   │   └── [ nearly empty folder thanks to yarn workspaces ]
│   │   ├── package.json
│   │   ├── public
│   │   ├── src
│   │   ├── [...]
│   ├── [other packages]
└── [...]

If I run VSCode from <root>/packages/my-vue-app, I don't have template intellisense finding vuetify tags/attributes.
I believe this has to do with vuetify being under <root>/node_modules instead of my-vue-app/node_modules.
However If I add a few dependencies under <root>/package.json (which normally has none) and run VSCode from <root>, then template intellisense finally works!
<root>/package.json:

    "dependencies": {
        "vue": "^2.6.10",
        "vue-apollo": "^3.0.2",
        "vue-router": "^3.1.3",
        "vuetify": "^2.1.10",
        "vuex": "^3.0.1"
    },

This doesn't seem to have side effects for me at the moment.
An easy fix would be to extend the dependency search in parent folders if a dependency is not found under ${workspaceRoot}/node_modules. Unless the dependencies are not installed yet, all dependencies should eventually be found that way.

rtbo picture rtbo on 1 Jan 2020
👍2

This problem definitely needs a real fix.

I found a workaround that worked specifically in my case: I had a vscode workspace file like all-projects.code-workspace

{
    "folders": [
        {
            "path": "activities-backend"
        },
        {
            "path": "activities-frontend"
        },
        {
            "path": "graspable-math"
        }
    ]
}

The "activities-frontend" folder had my Vue project in it, but Vetur was trying to use the tsconfig.json in my "activities-backend" folder. I fixed it by rearranging my workspace file like

{
    "folders": [
        {
            "path": "activities-frontend"
        },
        {
            "path": "activities-backend"
        },
        {
            "path": "graspable-math"
        }
    ]
}

. That got rid of the inappropriate Vetur errors that looked kinda like File '~/git/activities-frontend/src/foo.ts' is not under 'rootDir' '~/git/activities-backend/src'. 'rootDir' is expected to contain all source files.

I haven't tested this with a workspace that has more than one Vue project in it, but I suspect this workaround would fail for that.

davidbludlow picture davidbludlow on 19 May 2020
👍5 😄1

A related Vetur issue https://issuehunt.io/r/vuejs/vetur/issues/815 has a bounty of $264 so far.

davidbludlow picture davidbludlow on 19 May 2020
👍6

@mesqueeb has funded $10.00 to this issue.

issuehunt-app[bot] picture issuehunt-app[bot] on 28 Jun 2020

Hi guys. I just funded $10 to this issue.

My use case:

  • I have a Lerna project with a bunch of Vue related projects (some just single components) inside ./packages.
  • I like to open the entire Lerna project in 1 window in VSCode & be able to have Vetur working correctly.

My current issue:

  • Vetur doesn't read the tsconfig.json of each project properly.
    image

I hope this funding can promote others to also fund this issue and I hope to see full support for Lerna Monorepo's soon!! <3

mesqueeb picture mesqueeb on 28 Jun 2020
👍6

@garyo has funded $10.00 to this issue.

issuehunt-app[bot] picture issuehunt-app[bot] on 28 Jun 2020
👍2

Same here ($10). I'm using Emacs with eglot in a Yarn workspaces monorepo where the Vue front-end project is in one of the workspaces.

garyo picture garyo on 28 Jun 2020
👍1

This problem definitely needs a real fix.

I found a workaround that worked specifically in my case: I had a vscode workspace file like all-projects.code-workspace

{
  "folders": [
      {
          "path": "activities-backend"
      },
      {
          "path": "activities-frontend"
      },
      {
          "path": "graspable-math"
      }
  ]
}

The "activities-frontend" folder had my Vue project in it, but Vetur was trying to use the tsconfig.json in my "activities-backend" folder. I fixed it by rearranging my workspace file like

{
  "folders": [
      {
          "path": "activities-frontend"
      },
      {
          "path": "activities-backend"
      },
      {
          "path": "graspable-math"
      }
  ]
}

. That got rid of the inappropriate Vetur errors that looked kinda like File '~/git/activities-frontend/src/foo.ts' is not under 'rootDir' '~/git/activities-backend/src'. 'rootDir' is expected to contain all source files.

I haven't tested this with a workspace the has more than one Vue project in it, but I suspect this workaround would fail for that.

I can confirm that this solution works. Moving your vue or nuxt project on the top of the list fixes the issue.

bangjelkoski picture bangjelkoski on 9 Jul 2020
👍1

An anonymous user has funded $5.00 to this issue.

issuehunt-app[bot] picture issuehunt-app[bot] on 15 Jul 2020
👍4

oh, my god! who can fix the bug?

heavenkiller2018 picture heavenkiller2018 on 1 Aug 2020
👎6

1734 seems to work with lerna projects and multi-root workspaces. Can someone give it a try?

Minigugus picture Minigugus on 7 Aug 2020
👍3 ❤1

@Minigugus that would be a dream come true 😍 I hope someone can test and merge soon <3

mesqueeb picture mesqueeb on 8 Aug 2020
👍3

In case someone need, here is a transition tool that can be used before Vetur support multi root:
https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar

johnsoncodehk picture johnsoncodehk on 21 Aug 2020
👍3 👀2 🚀1

In case someone need, here is a transition tool that can be used before Vetur support multi root:
https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar

Thanks for that! Works great, but it throws some linting errors that Vetur doesn't throw :/

vigenere23 picture vigenere23 on 4 Sep 2020
🎉1

@octref

This problem has been going on for a long time, and there are many projects that require multi root

I have seen some PRs addressing the multi-root issue, I hope you can consider leaving it as an option to enable or disable to temporarily resolve the extension's multi rool issue until you have a good solution !

Thanks you !

kytosai picture kytosai on 6 Oct 2020
👍2

An anonymous user has funded $20.00 to this issue.

issuehunt-app[bot] picture issuehunt-app[bot] on 13 Oct 2020
👍4

@tobspr has funded $100.00 to this issue.

issuehunt-app[bot] picture issuehunt-app[bot] on 13 Oct 2020
🚀8 ❤6 👍3

Hi everyone,

If you interested this issue,

you can go to https://github.com/vuejs/vetur/pull/2377 and https://github.com/vuejs/vetur/pull/2378.
View and post your ideas.

yoyo930021 picture yoyo930021 on 14 Oct 2020
❤1 👍1

An anonymous user has funded $100.00 to this issue.

issuehunt-app[bot] picture issuehunt-app[bot] on 15 Oct 2020
❤8 👍5 🚀2

An anonymous user has funded $5.00 to this issue.

issuehunt-app[bot] picture issuehunt-app[bot] on 11 Nov 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

OsterHuang picture OsterHuang  ·  3Comments
LawrenceQxy picture LawrenceQxy  ·  3Comments
13029852933 picture 13029852933  ·  3Comments
LukeLin picture LukeLin  ·  3Comments
deangoku picture deangoku  ·  3Comments