Vue - Go to Definition in workspace and standalone

Question

I cannot seem to get Go to Definition (GTD) to work in vscode when I have my vue project (typescript) added to a workspace. However, if the project is opened as standalone/folder only, the GTD works perfect. GTD works perfectly when programming the typescript-based server-side within the workspace with similar tsconfig file.

The workspace file and the tsconfig file have been included. In addition, the Vue project is created by the vue-cli v3. Let me know if there is anything else I need to provide.

An example is these imports inside a.vue file:

import IProjectSlot from '@/interfaces/IProjectSlot';
import Container from '@/components/Container.vue';
import ProjectSlot from '@/components/ProjectSlot.vue';

When pressing CTRL + Click, it only opens a dialog with references inside the current file, and not directing to the implementation itself.

Any idea how to solve this mystery?

Workspace.code-workspace

{
    "settings": {
        "files.exclude": {
            "**/node_modules/": true,
        },
        "eslint.workingDirectories": [
            {
                "directory": "client-vue",
                "changeProcessCWD": true
            },
            {
                "directory": "server",
                "changeProcessCWD": true
            },
        ],
        "vetur.validation.script": false,
        "eslint.alwaysShowStatus": true,
        "eslint.codeActionsOnSave.mode": "all",
        "eslint.format.enable": true,
        "eslint.validate": [
            "javascript",
            "javascriptreact",
            "vue"
        ],
        "eslint.options": {
            "extensions": [
                ".ts",
                ".js",
                ".vue"
            ]
        },
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": false
        },
        "[vue]": {
            "editor.tabSize": 2,
            "editor.formatOnSave": false, // true = prettier not working completely
        },
        "[javascript]": {
            "editor.formatOnSave": false, // true = prettier not working completely
            "editor.tabSize": 2
        },
        "[typescript]": {
            "editor.formatOnSave": false, // true = prettier not working completely
            "editor.tabSize": 2
        },
    },
    "folders": [
        {
            "path": ".vscode"
        },
        {
            "path": "client-vue",
        },
        {
            "path": "database"
        },
        {
            "path": "server"
        }
    ],
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "strictPropertyInitialization": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "./src/*"
      ],
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Answer 1

I read somewhere that if the Vue project is the first one in the workspace to be loaded, then Vetur the plugin for Vue will register it as root project, therefore solving the issue.

Remember to reload vscode when moved.

Answer 2

This VSCode extension works well for me, hope this help https://marketplace.visualstudio.com/items?itemName=zardoy.vetur-extended