Cannot ever seem to init a new Nuxt project without squigglies everywhere

I have never seemed to be able to create and configure a new Nuxt project using
nuxi
without having both VSCode and Webstorm complain, a lot about imports and definitions.

Some of this may be WebStorm-replated (though get some of the same issues in VSCode), some may be Nuxt / TS related, but I'd like to understand what is going on.

Nuxt Config


Check the screenshot, but WebStorm complains about the config file from the get-go:

TS2349: This expression is not callable.   Type 'DefineNuxtConfig' has no call signature


I have to flip between Volar and TypeScript Vue Services a few times before WebStorm (sometimes) gets a handle on things.

Or, I have to import the definition:

import { defineNuxtConfig } from 'nuxt/config' // seems to be the only place WS finds it


Now, this works, but then WS complains (see next section).


Imports


Often imports which do resolve to the folder (i.e. I can
Cmd+Click
and go straight there in the IDE) just complain in a Nuxt project:

Volar: Cannot find module '@/components/ui/dropdown-menu'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the


Attached is an example of using Shadcn Vue from an initial install.

Now, a little investigation here reveals that Nuxt's moduleResolution is set to
Bundler
:

    "moduleResolution": "Bundler",


The Volar service complains (though the TS service doesn't), but changing this in
.nuxt/tsconfig.json
temporarily to
"Node"
and restarting Volar fixes all the squigglies.

This does not seem to be overridable with
tsConfig
.

Nuxt Modules


I'm not sure what the pattern is, but sometimes module config auto-completes, other times it doesn't and shows the config block, or items within it, as invalid.

I generally run
nnpx nuxi prepare
and sometimes this solves it, but sometimes not.

I suspect all of this has to do with the
.nuxt/tsconfig.json
file generation.

Why does this happen every time starting a Nuxt project?
CleanShot_2024-04-30_at_11.35.26.png
CleanShot_2024-04-30_at_11.46.49.png
CleanShot_2024-04-30_at_12.12.47.png
Was this page helpful?