Monorepo and vetur config file RFCs discussions

[yoyo930021]

I create two RFCs in Vetur.

If you care about monorepo, subfolder support or VTI, you can go to https://github.com/vuejs/vetur/pull/2377 and https://github.com/vuejs/vetur/pull/2378. View and post your ideas.

[kytosai]

For everyone to follow, I will continue to discuss the vetur.config.js file in this article (If you don't agree, I can move this comment on the right topic)

## How to use
Only useful for `vetur.config.js` file in root.
Ignore all `vetur.config.js` except root directory.
The only exception is when the VSCode Multi root, Vetur will read all roots vetur.config.js acting on the respective root.

I have a sample project (project-a) directory structure as follows:

project-a/
  .git/
  services/
    vue/
      .git/
      package.json
      Dockerfile
      vetur.config.js (1)
      ...
    nuxt/
      .git/
      package.json
      Dockerfile
      vetur.config.js (2)
      ...
    express/
      .git/
      Dockerfile
      package.json
      ...
  docker-compose.yml
  vetur.config.js (3)
  ...

There are 3 vetur.config.js files in total

If the vetur.config.js (3) file only works in the root folder. I will have to create a vetur.js file for each vue (1), nuxt (2) mini project if I want to open one of them in a separate vscode app. The code in the vetur.config.js file in (1), (2) will have to repeat in (3) if I have something special configured in (1) or (2).

If the vetur.config.js file can work while in the subdirectory, we can remove the vetur.config.js file (3). And then we can open vscode with the project-a or vue or nuxt directory as we wish without having to worry.

Opening multi root in a workspace might be a solution, but I don't think it is flexible

[yoyo930021]

For everyone to follow, I will continue to discuss the vetur.config.js file in this article (If you don't agree, I can move this comment on the right topic)

## How to use
Only useful for `vetur.config.js` file in root.
Ignore all `vetur.config.js` except root directory.
The only exception is when the VSCode Multi root, Vetur will read all roots vetur.config.js acting on the respective root.

I have a sample project (project-a) directory structure as follows:

project-a/
  .git/
  services/
    vue/
      .git/
      package.json
      Dockerfile
      vetur.config.js (1)
      ...
    nuxt/
      .git/
      package.json
      Dockerfile
      vetur.config.js (2)
      ...
    express/
      .git/
      Dockerfile
      package.json
      ...
  docker-compose.yml
  vetur.config.js (3)
  ...

There are 3 vetur.config.js files in total

If the vetur.config.js (3) file only works in the root folder. I will have to create a vetur.js file for each vue (1), nuxt (2) mini project if I want to open one of them in a separate vscode app. The code in the vetur.config.js file in (1), (2) will have to repeat in (3) if I have something special configured in (1) or (2).

If the vetur.config.js file can work while in the subdirectory, we can remove the vetur.config.js file (3). And then we can open vscode with the project-a or vue or nuxt directory as we wish without having to worry.

Opening multi root in a workspace might be a solution, but I don't think it is flexible

I'd actually like to discuss this in PR.

After some time to think about it, I've decided to change it to the same as finding tsconfig.json logic in TypeScript. Vetur will keep looking up from the root. I've updated RFC.

[IndexXuan]

we can only one by one setting the project options ? the project grows and we should always added the new one, can we use RegExp like packages/* ?

// vetur.config.js
{
  projects: ['./packages/a', './packages/b',  and so on],
}

[yoyo930021]

we can only one by one setting the project options ? the project grows and we should always added the new one, can we use RegExp like packages/* ?

// vetur.config.js
{
  projects: ['./packages/a', './packages/b',  and so on],
}

It is a JavaScript file and CommonJS module. You can use fs, glob module to do it.

[IndexXuan]

@yoyo930021 nice, I use fast-glob, it works well.

But when cd packages/a and code ., vetur failed, maybe a new bug or is it a feature . remove the root path vetur.config.js it works.

[yoyo930021]

@yoyo930021 nice, I use fast-glob, it works well.

But when cd packages/a and code ., vetur failed, maybe a new bug or is it a feature . remove the root path vetur.config.js it works.

Can you give me setting? I think it's a script problem.

If not, I think it's a bug. You can use Vetur: show doctor info command to get more info. And post in new issue.

[IndexXuan]

Vetur: show doctor info

{
  "name": "Vetur doctor info",
  "fileName": "/Users/indexxuan/workspace/hotel-business/packages/product-tongzhou/src/pages/index/views/index.vue",
  "currentProject": {
    "vueVersion": null,
    "rootPathForConfig": null,
    "projectRootFsPath": null
  },
  "activeProjects": [],
  "projectConfigs": []
}

my vetur.config.js content:

// eslint-disable-next-line @typescript-eslint/no-var-requires
const fg = require('fast-glob')
const projects = fg.sync('./packages/*', { onlyDirectories: true })

/** @type {import('vls').VeturConfig} */
module.exports = {
  // **optional** default: `{}`
  // override vscode settings
  // Notice: It only affects the settings used by Vetur.
  settings: {
    'vetur.useWorkspaceDependencies': true,
    'vetur.validation.template': false,
    'vetur.experimental.templateInterpolationService': true,
  },
  // support monorepos
  projects,
}

my project tree:

├── CONTRIBUTING.md
├── README.md
├── branchformat.config.js
├── docs
├── lerna.json
├── node_modules
├── package.json
├── packages
               ├── project-one
                      - src/**
                      - vue.config.js
                      - tsconfig.json
                      - package.json
              └── tsconfig.shared.json
├── postcss.config.js
├── scripts
├── vetur.config.js
└── yarn.lock

before the monorepo support, I can only cd packages/project-one && code . after support monorepo with vetur.config.js, I can code . at project root, but i cannot cd and code .

[yoyo930021]

Vetur: show doctor info

{
  "name": "Vetur doctor info",
  "fileName": "/Users/indexxuan/workspace/hotel-business/packages/product-tongzhou/src/pages/index/views/index.vue",
  "currentProject": {
    "vueVersion": null,
    "rootPathForConfig": null,
    "projectRootFsPath": null
  },
  "activeProjects": [],
  "projectConfigs": []
}

my vetur.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const fg = require('fast-glob')
const projects = fg.sync('./packages/*', { onlyDirectories: true })

/** @type {import('vls').VeturConfig} */
module.exports = {
  // **optional** default: `{}`
  // override vscode settings
  // Notice: It only affects the settings used by Vetur.
  settings: {
    'vetur.useWorkspaceDependencies': true,
    'vetur.validation.template': false,
    'vetur.experimental.templateInterpolationService': true,
  },
  // support monorepos
  projects,
}

my project tree:

├── CONTRIBUTING.md
├── README.md
├── branchformat.config.js
├── docs
├── lerna.json
├── node_modules
├── package.json
├── packages
               ├── project-one
                    - vue.config.js
                    - tsconfig.js
                    - package.json
              └── tsconfig.shared.json
├── postcss.config.js
├── scripts
├── vetur.config.js
└── yarn.lock

before the monorepo support, I can only cd packages/project-one && code . after support monorepo with vetur.config.js, I can code . at project root, but i cannot cd and code .

// eslint-disable-next-line @typescript-eslint/no-var-requires
const fg = require('fast-glob')
const projects = fg.sync('./packages/*', { onlyDirectories: true, cwd: __dirname })

/** @type {import('vls').VeturConfig} */
module.exports = {
  // **optional** default: `{}`
  // override vscode settings
  // Notice: It only affects the settings used by Vetur.
  settings: {
    'vetur.useWorkspaceDependencies': true,
    'vetur.validation.template': false,
    'vetur.experimental.templateInterpolationService': true,
  },
  // support monorepos
  projects,
}

Try this config file.

[IndexXuan]

@yoyo930021 Thanks for your reply. It is the same print when added cwd options; it is always

projects: [
  './packages/product-tongzhou'
]

[yoyo930021]

@yoyo930021 Thanks for your reply. It is the same print when added cwd options; it is always

projects: [
  './packages/product-tongzhou'
]

Normally, this is what will work. I have tested this case. =_= You can open a new issue.

[clouds56]

Is it possible to find vetur.config.js in folder .vscode as well?

[mortyccp]

I am using typescript project reference in my monorepo setup. I found that the hover definition and navigation of the monorepo shared module would point to the build version instead of the source version for .vue file. If I use to shared module in ts file, the navigation would point to the source.

Can we have a way to allow source file navigation in this case?

Also when the shared module updated, the hover definition tooltip still showing the cached version.

[yoyo930021]

Is it possible to find vetur.config.js in folder .vscode as well?

Why do you need it?

[yoyo930021]

I am using typescript project reference in my monorepo setup. I found that the hover definition and navigation of the monorepo shared module would point to the build version instead of the source version for .vue file. If I use to shared module in ts file, the navigation would point to the source.

Can we have a way to allow source file navigation in this case?

This part needs more detailed research. You can open a new issue.

Also when the shared module updated, the hover definition tooltip still showing the cached version.

This is a known problem. The typescript language service don't provide listen to these file changes in the following ways. I am still thinking about the solution.

[mortyccp]

#2603 Is opened for the code navigation.

[anzolo]

I am using typescript project reference in my monorepo setup. I found that the hover definition and navigation of the monorepo shared module would point to the build version instead of the source version for .vue file. If I use to shared module in ts file, the navigation would point to the source.

Can we have a way to allow source file navigation in this case?

Also when the shared module updated, the hover definition tooltip still showing the cached version.

You can refresh typing cache with VS Code command "Vetur: Restart VLS (Vue Language Server)". In my case, it fixes the cached types. It's a dirty fix because you need to restart VLS server after every ts/vue files change.

[yoyo930021]

I am using typescript project reference in my monorepo setup. I found that the hover definition and navigation of the monorepo shared module would point to the build version instead of the source version for .vue file. If I use to shared module in ts file, the navigation would point to the source. Can we have a way to allow source file navigation in this case? Also when the shared module updated, the hover definition tooltip still showing the cached version.

You can refresh typing cache with VS Code command "Vetur: Restart VLS (Vue Language Server)". In my case, it fixes the cached types. It's a dirty fix because you need to restart VLS server after every ts/vue files change.

I think you talk about not updating when file in node_modules. You can open a new issue for follow it.

It is a difficult problem. TypeScript language service isn't the same as language server protocol. We need to watch file change and talk to TypeScript language service. And we can't use built-in watch in language server protocol.

[clouds56]

Is it possible to find vetur.config.js in folder .vscode as well?

Why do you need it?

Since it is config only related to the IDE, and I could make the root clean (which is a rust project so it's strange to have a js file)

[TonyZhang1993]

Is it possible to find vetur.config.js in folder .vscode as well?

Why do you need it?

Since it is config only related to the IDE, and I could make the root clean (which is a rust project so it's strange to have a js file)

Is it possible to configure Vetur to read vetur.config.js in specific path instead of root path? @yoyo930021