ripe lodge
In a nuxt 3 project, when trying to use auto import VS Code feature (for things that Nuxt 3 does not auto import itself), the suggested alias for root is "~~". It is totally valid but I'd like to use "@" instead.
I'm not sure where and I how should I config this (vs code settings, tsconfig.json, nuxt.config.ts, etc.)?
Thanks!
vivid pumice
Not sure if there's an official way to do this but, if you take a look at .nuxt/tsconfig.json In the compilerOptions you have paths and you'll see ~~ is first.
To change the default suggestion move
"@": [
"."
],
"@/*": [
"./*"
],
To the start of the paths array. Of course, each time you build your change will be undone, so you need to move the paths array to your tsconfig.json. I believe tsconfig will merge compilerOptions objects but uses override, so you need to copy over all paths to your tsconfig.json
ripe lodge
Thanks for this. I'm a little bit confused since I noticed modifying nuxt.config.ts modifies the nuxt tsconfig.json itself. It means I should modify nuxt config rather than tsconfig right?
For example, I was thinking of removing default "~~" aliases, but it seems using alias dictionnary just extends the default aliases, and that there is no way to do this.
vivid pumice
Actually I think you're right, does this work for you?
typescript: {
tsConfig: {
compilerOptions: {
paths: {
'@': ['.'],
'@/*': ['./*'],
},
},
},
},
oops soz you only want @
ripe lodge
EDIT: thanks a lot, it works @vivid pumice
ripe lodge
sand jewel
FYI : https://github.com/nuxt/nuxt/issues/14816#issuecomment-1397366520
this is the preferred solution 😋
Actually, from next version you might not need to thanks to @hollow dome - https://github.com/nuxt/nuxt/pull/19937
ripe lodge
Same with French keyboard haha, copy paste saved my life
errant bramble
only snippet can help use