Exploring the capabilities of the VSCode Volar extension in a project utilizing Vue 2, Nuxt, Typescript, and the @nuxtjs composition-api

Trying to set up the Volar VSCode extension for a NuxtJS / Typescript project and facing two issues in .vue file templates. Followed the installation guide for Vue 2 and Typescript, and enabled Take Over mode.

Solved some codebase issues with the extension but these two remain.

Vue 3 deprecation warnings

(deprecation COMPILER_V_ON_NATIVE) .native modifier for v-on has been removed as is no longer necessary.
  Details: https://v3.vuejs.org/guide/migration/v-on-native-modifier-removed.htmlvue(COMPILER_V_ON_NATIVE)

Looking to silence these warnings as still using Vue 2 (NuxtJS not compatible with Vue 3 yet).

Custom event handlers, like this one on a custom <Modal> component.

@modal-confirmation="onModalConfirmed"

const onModalConfirmed = (modalConfirmation: ModalConfirmation) => {};

Type '(modalConfirmation: ModalConfirmation) => void' is not assignable to type '(...payload: unknown[]) => unknown'.
  Types of parameters 'modalConfirmation' and 'payload' are incompatible.ts(2322)

Has anyone dealt with this scenario before?

javascripttypescriptvue.jsvisual-studio-codevscode-extensions

Answer №1

As per the insights shared by @johnsoncodehk on Volar's GitHub page:

I am looking for a solution to suppress these warnings as I am currently utilizing Vue 2 (NuxtJS is not compatible with Vue 3 yet).

In order to address this issue, we will need to modify the experimentalCompatMode option. However, the final behavior of this option is still under consideration, so immediate changes are unlikely.

Fix for @vue/composition-api events type has been implemented in 953cb2d.

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

The call is not being answered by the server route (NodeJS + express)

I have encountered an issue while setting up a server using NodeJS and Express. When I attempt to make a get request to the basic route ('http://localhost:3000/'), the request seems to hang indefinitely. Despite thoroughly reviewing my code multi ...

javascriptnode.jsexpresssockets

identify the vuetify slider display

I am currently working with a vuetify slide group and I need to programmatically identify which slides are fully displayed and which are partially displayed. https://i.sstatic.net/qQImO.png Based on the image above, it can be seen that slide 0 and slide ...

vue.jsvuetify.js

"Enhancing the user experience: Triggering a window resize event in jQuery before page load on Magento

I am trying to trigger this function before the page finishes loading, but currently it only triggers after the page has loaded. Can anyone assist with this issue? $(window).on('load resize', function(){ var win = $(this); //this = window ...

javascriptjquery

Using PHP, show a specific table row when clicked by matching the ID

I am currently developing an application for a school project that manages tests. This app allows employees to log in, select a client, register clients, and conduct tests with them, all while storing the data in a database. I have successfully implemente ...

javascriptphphtmlmysqldatabase

Using Laravel to send a model with a related Vue component

Currently, I am in the process of learning how to utilize Vue and Laravel. As a part of this learning journey, I am developing Vue components to replace certain sections of the blades. Within my application, I have a model named Sugerencia (suggest). Alon ...

phplaravelvue.js

Tips for uploading images, like photos, to an iOS application using Appium

I am a beginner in the world of appium automation. Currently, I am attempting to automate an iOS native app using the following stack: appium-webdriverio-javascript-jasmine. Here is some information about my environment: Appium Desktop APP version (or ...

javascriptiostypescriptappiumwebdriver-io

Update the React component without needing to reload the entire webpage

Every time I attempt to render a new component, the entire page refreshes instead of just the components re-rendering. Upon loading the page, when I click the drop down menu in the header, it successfully renders a new component without any refreshing. Ho ...

javascriptreactjs

Creating a Unique Header for the Collapse Component in Ant Design Vue

Hello, I am currently working with Vue and Ant Design. I chose to use the Collapse Component from Ant Design, which can be found here: . However, I have encountered an issue with the Collapse.Panel component. The prop "header" is specified as a string, but ...

vue.jsantdant-design-vue

Are queued events in React discarded upon a state change?

As I develop a React form component with simple validation, I encounter an issue where the onBlur event of a field and the onSubmit function of the form are triggered simultaneously. If there is a change in the state during onBlur, the onSubmit function do ...

javascriptreactjsformsvalidationdom-events

SyntaxError in ExpressJS: Encountered an unexpected token "C"

I'm having trouble saving my string to a comma-separated array. When I attempt to use the JSON.parse method, I encounter an error while sending a post request and trying to save a record: SyntaxError: Unexpected token c at Object.parse (native) ...

javascriptjsonnode.jsparsingexpress

Using JavaScript to transfer the data ID from a button to a form

I am working on a project where I have a button that triggers a modal: <button type="button" class="btn btn-primary add-subscription" data-toggle="modal" data-workspace_id="{{ workspace.id }}" data-target="# ...

javascripthtmlajaxforms

ERROR occurred in the renderer.js file due to an unexpected punctuation token «(»

Version: webpack 2.3.3 Hello, I am currently working on developing my first Electron app using Vuejs. The process has been smooth so far until I encountered an issue during the packaging phase. Running npm run dev works perfectly fine, but when I execut ...

webpackvue.jselectronuglifyjs

What could be causing the model to not bind correctly in nodejs?

In the process of developing a web app with nodejs, angular, and mongo, I have encountered a strange issue. The model is not binding properly from the JSON object. Here is my Schema: var mongoose = require('mongoose'); var productSchema = new ...

javascriptjsonnode.jsmongodb

I am currently facing a challenge in React Highcharts where I am unable to remove and redraw the graph easily

Having an issue where I can't remove and redraw the chart in my React Highchart project. I've been unable to find a solution for this problem. Here is the code snippet: import { useState, useEffect, useRef } from "react"; import Highch ...

javascriptreactjshighchartsnext.js

javascript detect when two div elements are overlapping

On my webpage, I have implemented the effect.shrink() function. However, when clicking quickly on the page, the div tags start overlapping with other elements. What is the best way to solve this issue? I am using both scriptaculous.js and prototype.js fo ...

javascriptprototypejsscriptaculous

Issues concerning date and time manipulation - Library Moment.js

As a beginner in JavaScript, I've been working on an activity that generates a table of train times based on user input. However, I'm facing issues with formatting the arrival time correctly. Whenever I input the arrival time in military format ( ...

javascriptjqueryhtmlmomentjs

Encountering a "Cannot GET /PATH" error while developing a NUXT application due to a DOT present in

In my nuxt application, I encountered a peculiar issue. When I execute npm run dev, everything functions properly. However, after running npm run build and then npm run start, I face the error message stating cannot GET [path of the page here] I noticed t ...

javascriptnode.jsreactjsvue.jsnuxt.js

I am eager to retrieve every single item within the categories section utilizing a Vue component

Below is my Vue component CreateProduct.vue <template> <div> <div class="row mb-4"> <label for="category" class="col-md-4 col-form-label text-md-end">Category</label> ...

vue.js

Sending data to a MySQL database using AJAX with PHP

While attempting to use ajax to insert a value in PHP, I am encountering an issue where the data is not getting inserted into the database. The code snippet I am using was sourced from answers provided on this site. Can someone please point out where I m ...

javascriptphpjquerymysqlajax

Multiple occurrences of the cookie found in the document.cookie

My client is using IE9 and the server is asp.net (specifically a SharePoint application page). Within the Page_Load method of a page, I implemented the following code: Response.Cookies["XXXXX"].Value = tabtitles.IndexOf(Request.Params["tab"]).ToString(); ...

javascript.netcookiesinternet-explorer-9