Nuxt 3 turns a blind eye to TypeScript errors upon code saving

I am facing an issue. Even with a TypeScript error in the code, the IDE shows an error, but I am still able to save it and run it in the browser. Is this acceptable?

Check out the code below:

<script lang="ts" setup>
const a = ref<string>(5);
</script>

I have already attempted using export default and export default defineComponent(), but unfortunately, it did not resolve the issue.

Attached is the screenshot of my IDE: https://i.sstatic.net/UHOrq.png

Answer №1

The official Nuxt 3 documentation states that TypeScript type checking is not enabled by default for performance reasons when running nuxi dev or nuxi build.

If you wish to enable TypeScript type checking, you must:

  • Install vue-tsc and typescript as devDependencies
  • Add the following configuration in your nuxt.config.js:
typescript: {
  typeCheck: true,
}

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

Passing props in VueJS is a common task, especially while redirecting to another

I am working with two separate single-file components, each equipped with its own named route. In the Setup.vue component, there is a basic form that gathers and sends data to the Timer.vue component which expects certain props. Is there a way to navigate ...

difficulties arise when trying to use ngOnChanges to update an array

My code includes an array that is being updated from another component, with new Strings being added to it using the array.push() method. I have verified this update by testing it with a button, however, ngOnChanges does not seem to detect any change in ...

The type 'function that takes in a CustomEvent and returns void' cannot be assigned to a parameter of type 'EventListenerOrEventListenerObject'

When I upgraded from TypeScript version 2.5.3 to 2.6.1, my custom event setup started giving me an error. window.addEventListener('OnRewards', (e: CustomEvent) => { // my code here }) [ts] Argument of type '(e: CustomEvent) => ...

In TypeScript, the 'onChange' is declared multiple times, therefore this particular usage will be scrutinized carefully

Within my React project, I am utilizing material-ui, react-hook-form, and Typescript. However, I encountered an error in VSCode when attempting to add the onChange function to a TextField component: 'onChange' is specified more than once, resul ...

Include the <component> tag within a Vue.js template

Recently, I embarked on a journey to learn Vuejs and stumbled upon a single file component that has left me puzzled: <template> <component :is="user === undefined ? 'div' : 'card'"> ...some code </ ...

Having trouble with Vue.js accessing CSS reference for an external component datetimepicker in the dist folder

I recently integrated an external datetimepicker component into my project, and it functions perfectly in development mode. However, when I build the project for production as a web component to generate min.js files in the dist directory, the CSS referenc ...

Vue.js: In a third-party library, the reference to "this" is coming back as "undefined"

My third-party script contains code in the following format ( function initialMethod(scope, factory) { // 'scope' is undefined when used in Vue // but it works fine in React and Angular } (this, function function1(param1) { ...

I recently created an application using Vue and I'm exploring options for storing information to use later. Would using js-cookie be a viable solution for this?

After experimenting with Vuex to store user-selected information in my app, I found that the data was lost upon page reload. Switching to Cookies and using js-cookie solved this issue seamlessly. It makes me wonder if there is a downside to relying on cook ...

Error in NextJS: The name 'NextApplicationPage' cannot be found

const { Component, pageProps}: { Component: NextApplicationPage; pageProps: any } = props After implementing the code above with 'Component' type set to NextApplicationPage, an error message pops up stating, The name 'NextApplicationPage&ap ...

Retrieve information from a template and pass it to a Vue component instance

Being a newcomer to vue, I have a fundamental question. In my template, I have a value coming from a parsed object prop like this: <h1>{{myval.theme}}</h1> The above code displays the value in the browser. However, I want to store this value i ...

Running pre-commit eslint autofix but encountering errors that do not exist

Encountering an issue with committing changes to a file due to a failed pre-commit eslint --fix task, displaying the following errors: × eslint --fix: C:\Users\user\source\repos\project\project-frontend\src\compone ...

Creating a Vuejs index page through Node and Express: A step-by-step guide

I am currently developing a small application using Vuejs + Node, but I am facing the challenge of running 2 servers during development: Firstly, my node server: nodemon server.js Secondly, the Vuejs built-in script: npm run dev, which runs webpack-dev-s ...

Tips on updating v-for instantly?

What can be done if the product information of users can be changed by users, but the changes are not instantly reflected until the page is refreshed? <template> <div> <table> <thead> ...

How can I display an ngx spinner after a delay of 1 second?

I am uncertain about the answer I came across on this platform. intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const time = 900; const spinnerLogic = () => { if (this.isRequestServed ...

Transfer an object to $state.go

I'm having trouble solving this issue. Here's the state I am working with: var myState:ng.ui.IState = <ng.ui.IState> { url: '/new/{order.orderNumber}', controller: 'OrderController', controll ...

Get a list of images by incorporating NextJs and Strapi to create a dynamic slider feature

[] I need help creating a slider as I am encountering an error when trying to output an array of objects. The error can be seen here: https://i.sstatic.net/HHOaB.png. Can someone assist me in resolving this issue? Thank you. Here is a screenshot from the ...

The specified argument, 'void', cannot be assigned to a parameter that expects 'SetStateAction | undefined'

Currently, I am engaged in a TypeScript project where I am fetching data from an endpoint. The issue arises when I attempt to assign the retrieved data to my state variable nft using the useState hook's setNft function. An error is being thrown specif ...

Encountering an Issue with Dynamic Imports in Cypress Tests Using Typescript: Error Loading Chunk 1

I've been experimenting with dynamic imports in my Cypress tests, for example using inputModule = await import('../../__tests__/testCases/baseInput'); However, I encountered an issue with the following error message: ChunkLoadError: Loading ...

The error message "React is not defined" is commonly encountered when using React Native Storybook with

While attempting to configure React Native with Storybook, I encountered an issue when importing a .tsx component. The error displayed was: React is not defined ...

Improving presentation of a 5MB query outcome with Python and VueJS

I am currently working on a web application that utilizes Python (bottle) on the server and VueJS on the client side. One of my frontend components is responsible for displaying paginated results from a query that returns over 10,000 records. These records ...