"Go to definition" doesn't work in .vue files

[ffxsam]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: macOS 10.13.3
• Vetur version: 0.11.7
• VS Code version: 1.20.1

Problem

Cmd-clicking (or F12) on a Vue component import statement has no effect. It's impossible to jump to the file being clicked on.

Reproducible Case

https://github.com/ffxsam/no-goto

[HerringtonDarkholme]

We don't support omitting .vue file extension.

#423 (comment)

[ffxsam]

@HerringtonDarkholme Oh.. you should've told me all I had to do was add the .vue extension on my imports, and then it works. Is there any way to make the import suggestion add the extension automatically?

[HerringtonDarkholme]

Sorry for being jumpy, but your filename https://github.com/ffxsam/no-goto/blob/master/src/components/NoWork.vue indicates you have realized the problem in that HelloWorld.vue did work.

You can install path intellisense in vscode. Its behavior doesn't make sense to me since it skip vue extension(but does keep file extension for png/html). I suggest you open a new issue there. You can also use https://github.com/ChristianKohler/PathIntellisense#file-extension-in-import-statements

[ffxsam]

@HerringtonDarkholme Path Intellisense doesn't work with .vue files and appears to be abandonware. Do you know of any other extensions that will do path autocompletion for Vue files?

[hecktarzuli]

I have the same problem, except I can't even go to the def of a function within the same .vue file!
Vetur v0.11.7, Mac

[enricribas]

Why is this closed? I can't go to the definition even if I add the extension. Is this working for others? It works fine with JSX and react files.

[HerringtonDarkholme]

Please provide a reproduction code repository if you meet a problem.

[KorvinSzanto]

@HerringtonDarkholme here's a real life snippet from real vue code that exhibits this problem:

I:

• Downloaded vscode fresh
• Installed vetur
• Opened this vue file

<script>
import interact from 'interactjs'

export default {

    // Our component name
    name: "avatar-image",

    // The properties available for our parent to edit
    props: {
        img: String,
        imageHeight: Number,
        imageWidth: Number,
        cropperWidth: Number,
        cropperHeight: Number,
        shadow: Boolean
    },

    // Our state
    data() {
        return {
            x: 0,
            y: 0,
            adjX: 0,
            adjY: 0,
            resizeHeight: 0,
            resizeWidth: 0,
            viewport: null,
            outer: null
        }
    },

    /**
     * Prepare to render by setting up our viewport
     */
    beforeUpdate()  {
        if (this.viewport) {
            this.viewport.x = this.x;
            this.viewport.y = this.y;
            this.viewport.adjX = this.adjX;
            this.viewport.adjY = this.adjY;
            this.viewport.resizeWidth = this.resizeWidth;
            this.viewport.resizeHeight = this.resizeHeight;
        }
    }
}
</script>

When I right click on any of my this.viewport... and click go to definition, I see "No definition found for 'viewport'"

Is this just not something Vetur is willing to support?

[fourpixels]

News?

[arufian]

I got this too.

Directory structure:

   app.js
   components/ArticleList.vue

I cannot [ctrl + click] into ArticleList.vue from app.js

  import ArticleList from './components/ArticleList'

[octref]

@arufian https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#vetur-cant-recognize-components-imported-using-webpacks-alias. You can't omit .vue suffix.

[LukasBombach]

I had this problem even when using the .vue extension. I fixed this by simply reinstalling Vetur:

Run command: Developer: Reinstall Extension for Vetur

https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#no-syntax-highlighting--no-language-features-working

[Victor2333]

Need to add <script lang="ts"> to your .vue file. And config webpack and like this:
webpack:
{
test: /.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/.vue$/],
}
},

last step is add vue-shims.d.ts at /src/ to let typescript know what is .vue file.

this work for me.

[mzvast]

News？

[jsparedes]

I had the same problem described by @KorvinSzanto in my vue files: "No definition found"

Analizing a generated vue-cli project, I did 2 things:

Add @vue/cli-plugin-babel in my devDependencies:
"@vue/cli-plugin-babel": "^3.10.0"

Create a file: babel.config.js
module.exports = { presets: [ '@vue/app' ] }

Doing these 2 things, I could use propertly "Go to definition" inside my vue files.

[mzvast]

VSCode is just an editor which is not ready for productivity.
You have to waste hours and hours every month to configure and to get things works right and putting plugin pieces to coordinate with harmony.
But, by using WebStorm, all these features are out of box.
Just give WebStorm a try and you will definitely love it!

[galaa2011]

News?

Upgrade or downgrade different version.

[capihacendado]

news?

@HerringtonDarkholme here's a real life snippet from real vue code that exhibits this problem:

I:

• Downloaded vscode fresh
• Installed vetur
• Opened this vue file

<script>
import interact from 'interactjs'

export default {

    // Our component name
    name: "avatar-image",

    // The properties available for our parent to edit
    props: {
        img: String,
        imageHeight: Number,
        imageWidth: Number,
        cropperWidth: Number,
        cropperHeight: Number,
        shadow: Boolean
    },

    // Our state
    data() {
        return {
            x: 0,
            y: 0,
            adjX: 0,
            adjY: 0,
            resizeHeight: 0,
            resizeWidth: 0,
            viewport: null,
            outer: null
        }
    },

    /**
     * Prepare to render by setting up our viewport
     */
    beforeUpdate()  {
        if (this.viewport) {
            this.viewport.x = this.x;
            this.viewport.y = this.y;
            this.viewport.adjX = this.adjX;
            this.viewport.adjY = this.adjY;
            this.viewport.resizeWidth = this.resizeWidth;
            this.viewport.resizeHeight = this.resizeHeight;
        }
    }
}
</script>

When I right click on any of my this.viewport... and click go to definition, I see "No definition found for 'viewport'"

Is this just not something Vetur is willing to support?

I have exactly the same problem

[eyalev]

The Vue Peek extension works for me.

[amirmeimari]

News?

[jackie-qiu]

Any news?

[drinkcsis]

Waiting too!((

[Sovai]

News?

[smonist]

News?

[marknuyens]

News?

[bastiW]

Any update?

[ghost]

https://youtu.be/wJQykqGl2xs follow this

[fadeawaygod]

https://youtu.be/wJQykqGl2xs follow this

for users who prefer texts:

1. open VScode setting(Json)
2. add a line:
   "vetur.experimental.templateInterpolationService": true,

[yoyo930021]

Hello everyone,

This problem has many parts.

1. Where is Vetur support 'Go to definition' feature?
   We support script block with TypeScript language service.
   But it is broken when wrong typescript type define.
   Like: https://vuejs.github.io/vetur/guide/FAQ.html#property-xxx-does-not-exist-on-type-combinedvueinstance
   The template block is support when "vetur.experimental.templateInterpolationService": true.
   It is also based on TypeScript language service.
2. Set the project path alias?
   If you use path alias, please set compilerOptions.paths in tsconfig.json/jsconfig.json.
3. TypeScript isn't support custom file extensions.
   We hack some common paths, let it works.
   But it doesn't work in some case. Like: index.vue.
4. Vetur only can effect Vue SFC files.
   If you use ts file, we can't do nothing, unless the ts plugin is used. ref: Explore TS Plugin support in Vetur by integrating znck/developer-experience's refactor support #2016

Continue to leave comments here is not very helpful to everyone.
Because each person's reasons may be different.
I will lock this issue and you can open a new issue when have problems.