What is the procedure for setting up .vue file imports from .ts file in Vim?

Having trouble configuring NeoVim to work with Vue on a new LunarVim setup. Specifically struggling with .ts files and importing .vue files. Treesitter has configuration for both vue and typescript, tsserver and volar LSPs are working properly with autocompletion. However, encountering errors in imports like 

Cannot find module './App.vue' or its corresponding type declarations
. Have verified that the App.vue file exists, issue seems to be isolated to .vue files.enter image description here

Tried reinstalling tsserver and volar, but no success.

javascripttypescriptvue.jsneovimlanguage-server-protocol

Answer №1

The reason I encountered a problem was due to the absence of the @vue/typescript-plugin package in my setup connected to ts_ls. For more details, check out this link: https://github.com/vuejs/language-tools

After configuring my lua settings as shown below, I now have the correct types for imported vue files:

lspconfig.ts_ls.setup({
    init_options = {
    plugins = {
      {
        name = "@vue/typescript-plugin",
        location = "/home/dev/.nvm/versions/node/v20.18.0/lib/node_modules/@vue/language-server",
        languages = {"javascript", "typescript", "vue"},
      },
    },
  },
  filetypes = {
    "javascript",
    "typescript",
    "vue",
  },
})
lspconfig.volar.setup{}

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

Updating Data with AJAX Technology

We've been tasked with providing users with real-time updates on the status of a backend process that runs within our application. In order to display this information, we set up a Status table in the database which tracks tasks that are complete, fai ...

javascriptjqueryajax

Is there a way to prevent specific objects from being dropped?

Imagine having object1, object2, and object3. They are designated for dropping only in Zone1 Now, consider object4, object5, and object6. They can only be dropped in Zone2 How do I set up this configuration? Additionally, I want object7 to be droppable ...

javascriptkendo-uikendo-asp.net-mvckendo-draggablekendo-droptarget

JavaScript Function to Convert JSON Data into an Excel File Download

I am looking for help with converting JSON data received from an AJAX POST Request into an Excel file (not CSV) for download on a button click. The JSON Data may contain blank values and missing fields for each JSON row. I have attempted to achieve this o ...

javascriptjsonajaxexceltype-conversion

Button placed within a jade table cell

I'm struggling to make a button appear in each row of the table. I am new to working with Jade and Node.js, so I can't seem to figure out why it's not showing up. Here is my Jade file: html head body table.table.table(border='1 ...

javascripthtmlpug

Obtain the specific generic type that is employed to broaden the scope of a

I am working on a class that involves generics: abstract class Base<P extends SomeType = SomeType> { // ... } In addition, there is a subclass that inherits from it: class A extends Base<SomeTypeA> { // ... } I'm trying to figure out ...

typescript

JavaScript runtime error: Unforeseen exception code 0x800a138f has occurred

Encountering an exception when attempting to add a rule to a Radiobutton List using the rules() method. Error found at line 3747, column 3 in 0x800a138f - JavaScript runtime error: Unable to get property 'jQuery223064526755237397352' of undefin ...

javascriptjquery

How to attach a listener to an ASP.NET control with jQuery

Looking for a way to detect user interaction with a checkbook list, text box, or drop down list, and style other elements based on the values present. Is there a way to achieve this using jQuery? ...

javascriptasp.netjquery-uijquery

Unusual behavior: Django app not triggering Ajax XHR onload function

I'm currently working on a Django app that features user posts, and I'm in the process of implementing a 'like' / voting system. Initially, I set up this functionality using complete page refreshes combined with a redirect after the vot ...

javascriptdjangoajaxxmlhttprequest

The 'validate' property within the 'MappingService' class cannot be assigned to the 'validate' property in the base class 'IMappingService' in typescript version 2.8.0

Currently, I am utilizing the AngularJS framework (version 1.5.8) in tandem with the latest TypeScript files (2.8.0). However, upon updating to the newest version of TypeScript, the code below is failing to compile. The IMappingService interface: export ...

typescript

Increase initial zoom for React Three Fiber OrbitControls to provide a wider view

I've been working on a project in React Three Fiber using this codesandbox for practice. My query regarding the demo is about setting a wider initial zoom in OrbitControls to view more small stars. Can anyone help with this? Below is the code snippe ...

javascriptthree.jsreact-three-fiberreact-three-dreiorbitcontrols

Typing should be positioned on either side of the declaration

When I define the type MyType, it looks like this: export type MyType = { ID: string, Name?: string }; Now, I have the option to declare a variable named myVar using three slightly different syntaxes: By placing MyType next to the variable ...

javascriptnode.jstypescript

What is the best way to achieve maximum height?

Currently, I am attempting to obtain the total height of the page in order to apply it to the styles, specifically for the darkMask class. The reason for needing this height is that when a certain action is triggered within the header, a dark overlay is a ...

javascriptreactjsnext.jsserver-side-rendering

Removing the Tawk.to integration in React Redux using external JavaScript

Seeking help with integrating the Tawk.To Widget into my React APP. The widget (javascript) loads successfully when the page is first opened, but remains present when navigating to another page. How can I properly unmount this script when moving to a diff ...

javascriptreduxreact-reduxwidgettawk.to

Issue: No default template engine specified and no file extension provided. (Using Express framework)

While I came across numerous questions with a similar title, they only provided me with partial help and did not completely resolve the error that plagued me. Just to provide some context, I had created a file named listing.js as a tool for running node c ...

javascriptnode.jsexpress

Tips for safely sanitizing strings containing special characters such as "\r\n"

Strings are coming in the following formats: "\\r\\n " "\\r \\n" "\\n \\r " These strings are being retrieved from a third party API. Before storing them in the database, I need to conv ...

javascriptnode.js

jQuery still not running despite using .ready

I have been attempting to run some jQuery code on my HTML page. After doing some research, I learned that using .ready may be necessary to ensure the DOM is fully loaded before executing the script. Despite this, I am still having trouble getting the scrip ...

javascriptjquery

Is the child component receiving an empty prop that is not being updated?

In my React project, I am utilizing an API to fetch data and populate form fields for users to edit existing records. Unfortunately, the child component is only receiving the initial version of the longhorn entity instead of the updated one fetched from t ...

reactjstypescriptreact-hooksfetch-api

A Vue.JS checkbox that operates independently from v-model

Looking to implement a checkbox without relying on v-model <input type="checkbox" :value="value" @change="$emit('input', $event.target.checked)" /> The checkbox can be toggled, and the input event is transmitted to the parent component, b ...

vue.js

Accessing weather information in React with Ajax

Utilizing the Open Weather Map current weather data API, my goal is to integrate real-time weather data retrieval into my React.js application using ajax. My aim is to extract the current temperature for a specified city and display this value within my co ...

javascriptjqueryjsonajaxreactjs

Utilizing state as a prop in React router v6 with the power of TypeScript

Excuse my lack of knowledge, as I am still getting the hang of React router v6 and Typescript. I'm attempting to pass both a state and a function that can update the state through the data flow of my application. const [playerSystem, setPlayerSystem] ...

javascriptreactjstypescriptreact-router