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

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!

We don’t support omitting .vue file extension.

https://github.com/vuejs/vetur/issues/423#issuecomment-340235722

@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 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

The Vue Peek extension works for me.

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.

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'

https://youtu.be/wJQykqGl2xs follow this

News?

Upgrade or downgrade different version.

@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.

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

News?

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.