[Fixed] Adding property 'css:[]' in Nuxt 3 resulting in Typescript error – Typescript

The Problem:

A user is trying to add the ‘css’ property to their ‘nuxt.config.ts’ file in a Nuxt 3 project using Typescript and CompositionAPI. However, they are encountering a Typescript error, ‘Argument of type ‘…’ is not assignable to parameter of type ‘NuxtConfig”, specifically concerning the ‘css’ property. They have verified that the code works locally but are experiencing the error in their IDE.

The Solutions:

Solution: Try installing `eslint` as dev dependency

Installing `eslint` as a dev dependency can fix the issue in your IDE. Run the following command in your terminal:

npm install eslint --dev

Then, create an .eslintrc.js file in your project root directory with the following content:

module.exports = {
  ignorePatterns: ['node_modules/*'],
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:nuxt/recommended',
  ],
  rules: {
    'nuxt/no-cjs-in-config': 'off',
  },
};

This should resolve the error in your IDE and allow you to use the css: [] property without errors.

Solution 2: Change Typescript Version to Workspace Version

Change the TypeScript version in your IDE to match the version used in your workspace. This can be done by going to the "Settings" tab in your IDE and selecting the "TypeScript" option. From there, you can adjust the TypeScript version to match the one defined in your "package.json" file under the "devDependencies" section.

Solution 3: Running Nuxt Dev/Build

To fix the TypeScript errors related to the css: property in your nuxt.config.ts, you can try the following steps:

1. Add the necessary configuration to your nuxt.config.ts file.
2. Run nuxt dev or nuxt build to generate the necessary types.

This should resolve the TypeScript errors related to the css: property.

Video Explanation: