Creating a jsconfig.json file for a VueJS project

Using Vue js 2.6.X and created with Vue-Cli 4.5.X using the command vue create name

A jsconfig.json file has been included in the root folder

  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/modules/*": ["./src/store/modules/*"]
    }
  },
  "exclude": ["node_modules", "dist"],
  "include": ["src/**/*"]
}

The @ alias is functioning correctly. I am able to use @/store/modules/...

However, the custom alias I added:

@/modules/*

seems to be causing an issue

This dependency was not found:

* @/modules/... in in ./node_modules/cache-loader/dist/cjs...

Any suggestions on how to resolve this? Existing resources don't seem tailored to the setup of Vue js and Vue-Cli....

I also suspect that @/* is part of the default Vue-Cli setup, so adding it might be redundant

javascriptvue.jsvuejs2vscode-jsconfig

Answer №1

One technique that has proven effective for me is including aliases in the webpack setup found in the vue.config.js file.

    configureWebpack: {
        resolve: {
            alias: {
                '@': path.resolve(__dirname, vueSrc),
                '@modules': path.resolve(__dirname, vueSrc + 'store/modules')
            },
            extensions: ['.js', '.vue', '.json']
        }
    }

It's worth noting that I specifically used @modules without the extra slash, which could potentially handle either version. It might be beneficial to try switching the order if there are conflicting matches, but generally webpack follows a longest match policy.

Answer №2

Consider utilizing

"@@/*":["./src/database/data/*"]

and when writing your code make sure to

import info from "@@/data_name";

this will search for ./src/database/data/data_name

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

What is the best way to make img-fluid function properly within Bootstrap Carousel?

I've been struggling to make my carousel images responsive by using the img-fluid tag, but I haven't had any success. I've attempted using !important and display: block, but nothing seems to work. I'm not sure what's causing the is ...

javascripthtmlcssbootstrap-4

The ES6 class Inheritance chain does not properly utilize the instanceof keyword

My curiosity lies in understanding why the instanceof operator fails to work properly for the inheritance chain when there are multiple chains of inheritance involved. (optional read) How does the instanceof operator function? When using obj inst ...

javascriptclassinheritanceecmascript-6es6-class

Extract the initial line in the grid

I was wondering if there is a way to automatically copy the first value of a row in a grid to all the remaining rows. For example, if I have two columns A and B, and I input a value in column B at the first row, can that value be automatically populated in ...

javascriptasp.net

Is there a way to set a personalized callback function when closing a modal with MicroModal?

I've been utilizing MicroModal for showcasing a modal window. Everything seems to be working smoothly, except for when I try to trigger an event upon closing the modal. It's unclear to me where exactly I should implement this callback function. ...

javascript

Error retrieving Facebook access token using Node.js https.get()

I've been working on setting up a Facebook login flow in my node.js app, but I'm facing an issue where the access token isn't returning from the Facebook API when using node's https.get() method. Interestingly, I am able to retrieve the ...

javascriptfacebooknode.jsfacebook-graph-api

Updating the scope variable in an AngularJS directive

Recently delving into Angular, I encountered an issue: I have both a list view and a details view with tags. To facilitate navigating between the two views and loading new elements from a service upon click events, I created a directive. My aim is to also ...

javascripthtmlangularjsangularjs-directive

Strange behavior observed in the Datepicker, possibly linked to the blur event

I'm facing a challenge with the Datepicker feature. When I blur, the calendar disappears if the Datepicker was active, but the focus remains on the input field. As a result, I am unable to trigger the Datepicker again by clicking on the input field. T ...

javascriptjqueryjquery-uidatepicker

Is it possible to simultaneously send a JSON object and render a template using NodeJS and AngularJS?

I'm currently facing issues with my API setup using NodeJS, ExpressJS Routing, and AngularJS. My goal is to render a template (ejs) while also sending a JSON object simultaneously. In the index.js file within my routes folder, I have the following s ...

javascriptangularjsnode.jsajaxexpress

What are the common reasons for ajax requests to fail?

Every time I try to run the code with the provided URL, the alert() function in the error: function is triggered. Can someone please assist me with this issue? $("#button").click(function(){ $("#form1").validationEngine(); if($('div input[typ ...

phpjavascriptjqueryhtmlajax

Retrieve the ngModel's current value

One of the challenges I encountered is with a textarea and checkbox interaction. Specifically, once the checkbox is checked, I aim to have the value appear in the textarea. <div class="message-container"> <textarea *ngIf="mode === 1" ...

javascriptangularionic2ionic3

Switching component upon button click in ReactJS

After clicking the button, I want to change the component displayed on the screen. I have created a function called changeComp() within my component's class. However, when I click the button, it doesn't route to the wallet-connect component as ex ...

javascriptcssreactjs

Emphasize rows in the MUI-Datatables framework

A table was created using React.js and MUI-Datatables: import MUIDataTable from "mui-datatables"; const columns = ["Name", "Company", "City", "State"]; const data = [ ["Joe James", "Test Corp", "Yonkers", "NY"], ["John Walsh", "Test Corp", "Hartford", ...

javascriptreactjsmaterial-uimui-datatable

Encountered difficulties logging in with MongoDB and Node.js

I encountered an issue while attempting to authenticate a user using MongoDB and Node.js. Although no errors are thrown, the system fails to provide the expected data after the user logs in. Below is a breakdown of my code. server.js var port=8888; va ...

javascriptnode.jsmongodbmongojs

Check the box by clicking on the label to activate it [Vue.js]

While browsing online, I came across a fantastic tutorial on creating a toggle component on YouTube. https://www.youtube.com/watch?v=J0hp2NF5OzU&ab_channel=LaurentPerrier At the 23rd second mark, the instructor demonstrates that clicking on the label ...

vue.jscheckboxlabel

Angular JS Route Hijacking

Currently, I am developing an AngularJS application with Firebase as the backend system. One of my main goals is to require users to log in before accessing any part of the application. To achieve this, I plan on using Firebase's User Authentication ...

javascripthtmlangularjsfirebaseangularfire

Display some results at the conclusion of eslint processing

As I develop a custom eslint plugin, I am intricately analyzing every MemberExpression to gather important data. Once all the expressions have been processed, I want to present a summary based on this data. Is there a specific event in eslint, such as "a ...

javascriptpluginseslint

Update the headers of the axios.create instance that is exported by Axios

I have a single api.js file that exports an instance of axios.create() by default: import axios from 'axios' import Cookies from 'js-cookie' const api = axios.create({ baseURL: process.env.VUE_APP_API_URL, timeout: 10000, headers ...

javascriptvue.jsecmascript-6vuejs2axios

What is the best way to update a CSS class in React JS?

Suppose I have a CSS class called 'track-your-order' in my stylesheet. Whenever a specific event occurs, I need to modify the properties of this class and apply the updated values to the same div without toggling it. The goal is to replace the ex ...

javascriptcssreactjsstylesheetclassname

Deleting an item with a specific id from an array within the state of React hooks

I am facing a challenge in removing a specific id from this setup. I attempted to utilize the `filter` method within the `setNotesDummyData(notesDummyData.filter((o) => { myCondition }));` line inside the `onChangeItemName` function, but I am unable to ...

javascriptreactjsreact-hooks

A step-by-step guide on integrating OpenStreetMap into my NUXT application

I am currently working on integrating OpenStreetMap into my NUXT.js application using the nuxt-leaflet module. However, despite following all the instructions provided, I am encountering an issue where the page is appearing empty. After facing this proble ...

vue.jsleafletopenstreetmapnuxt.js