Vetur's "go to definition" feature is unable to redirect users after pressing alt and clicking

I consider myself a proficient user of Vue and I require the ability to ALT+click (multiCursorModifier) on different Vue components in my project to navigate to their definition/implementation. I have already installed Vetur and configured the following settings in my settings.json file for Vetur.

   "vetur.experimental.templateInterpolationService": true,
   "vetur.trace.server": "verbose"

Below is the configuration in my jsconfig.json file.

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["./src/*"],
        }
    }
}

When attempting to click on my Vue 2 component, I encountered the following error message.

Unable to open 'vue-editor-bridge.ts': Unable to read file '\vue-temp\vue-editor-bridge.ts' (Error: Unable to resolve non-existing file '\vue-temp\vue-editor-bridge.ts').

I simply want the click to definition feature to function properly. I also tried using the Vue Peek extension without success. How should I proceed from here?

Answer №1

To make your components globally accessible, you must specify them as global components in the vetur configuration file:

globalComponents: ['./components/**/*.vue']

For further details, check out the vetur documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing field names in Mongoose before inserting them into the database

I have a database schema set up as follows const UserSchema = new Schema({ first_name: "john", last_name: "doe" }) When data is received on my API route, it looks like this in the response body request.body = { firstName: "joh ...

Determination of an arc trajectory using JavaScript

I have been trying to figure out how to replicate this effect. The Red arrowhead remains stationary while the background features a curved path. Currently, I am adjusting the background position to give the illusion of the arrowhead moving along the curved ...

"Error occurred: Unable to execute bgColor as a function" on HTML select onchange event

I am having an issue with my HTML switch that has an onchange tag triggering the JavaScript function bgColor with the argument this. However, every time I attempt to use this, I receive an error message: Uncaught TypeError: bgColor is not a function. Can a ...

Identifying Oversized Files on Safari Mobile: A Guide to Detecting Ignored Large Files in

Mobile browsers such as Safari have a tendency to ignore large files when passed in through the <input type="file">. For example, testing with a 10mb image file results in no trigger of any events - no change, no error, nothing. The user action is si ...

Creating a Custom Error Page in SpringBoot

After developing an application with SpringBoot that features webservices and a front-office coded in ReactJs, the default port was set to 8080. To simplify the URL access, I decided to switch this application to port 80 by adding the code snippet below to ...

Retrieve data from a single PHP page and display it on another page

In my project, I am working with three PHP pages: index.php, fetch_data.php, and product_detail.php. The layout of my index.php consists of three columns: filter options, products panel, and detailed description. Whenever a user clicks on a product in th ...

Why is my jQuery blur function failing to execute?

Currently, I am working with HTML and the jQuery library to avoid core JavaScript in order to maintain consistency. In my project, there are 3 fields and when a user clicks on field1 and then somewhere else, I want only field1's border to turn red. T ...

Develop your own personalized Angular schematics that produces a file that begins with an underscore

Having trouble with custom Angular schematics file naming. I'm trying to create a theme SCSS file that starts with an underscore followed by a double underscore as a delimiter. For instance, I want the file name to be _mouse-theme.scss, using the nam ...

Troubles arise when trying to convert a schema using Normalizr

Is there a way to efficiently convert a JSON array containing travel expenses into a format that allows for easy retrieval of expenses by travelExpenseId and tripId? [ { "travelExpenseId":11, "tripId":2, "paymentPurpose":"some payment ...

Jest testing in a Vue child component is failing due to the presence of lodash

In this specific instance of my Vue app, I have globally loaded lodash as a Vue plugin in the main.js file: import _ from "lodash" export default function install(Vue) { Vue.prototype._ = _ Vue.mixin({ computed: { _: () => ...

Deciphering the meaning of the 'this' keyword in a prototype function of an object

var Controller = function () { try { throw new this.userException('test', 'test'); } catch (error) { if (error instanceof this.userException) { console.error(error.stack); } } } Controller.prototype.userExceptio ...

Generate a compilation of products developed with the help of angularjs

I have a request to make a list of items using Directives and share them through controllers. Check out my code example on plunker: Code Example Below is the JavaScript code: var app = angular.module('app', []); app.controller("BrunchesCtrl", ...

Partial implementation of jQuery datepicker feature facing technical issues

Greetings, I have a functional datepicker implemented in my code as follows: <link rel="stylesheet" href="uidatepicker/themes/blitzer/jquery.ui.all.css"> <script src="uidatepicker/jquery-1.5.1.js"></script> <script src="uidate ...

Can React-Select be utilized in the browser directly from the CDN?

Is it possible to utilize react-select directly in the browser without using bundlers nowadays? The most recent version that I could find which supports this is 2.1.2: How to import from React-Select CDN with React and Babel? In the past, they provided r ...

The feature for sending posts in Angular.js appears to be malfunctioning

I have developed a rest-API for adding todos in a MongoDB database. When I use Postman with the setup below, I can successfully save instances: http://localhost:3000/api/addtodo x-www-form-urlencoded with values text="Test", completed: "false". However, ...

Exploring the possibilities of querying Firestore data with dynamic user input

I am facing an issue with my code and struggling to find the right solution. My goal is to build a filter that, upon clicking on each option, will automatically fetch data from firestore. https://i.sstatic.net/ktLuE.png Within my Redux Saga, I have the ...

ExpressJS - Issue with POST Router resulting in 404 Error

I am currently getting acquainted with ExpressJS and am in the process of setting up a small todo list app while incorporating React. I have successfully retrieved my list of todos from a mysql database, however, I am encountering difficulties with the POS ...

An error popped up while using the fetch API due to an unexpected end of input

fetch('http://www.freegamesforyourwebsite.com/feeds/games/?tag=platform&limit=100&format=json', { method:'GET', mode:'no-cors', dataType: 'json', headers: { 'Accept': 'a ...

Tips for looping through the new element that has been added to an array from the database query result

I am faced with a challenge involving querying a mysql database using each element of an array in Node.js. If a specific condition is met, I need to append additional elements to the same array and iterate through them as well. As I am new to Node.js, I a ...

The first ajax request went off without a hitch, but the second one hit a snag and displayed a parse error

I am facing an issue with two Ajax calls that have similar lines but only one of them seems to be working correctly. First Ajax post : $("#languageswitcher").change(function(){ var locale=$(this).val(); //alert(111); //console.log(111) ...