No intellisense or types working in vscode?

[Nisthar]

Description

I tried creating a new nuxt 3 project, installed nuxtui using npm i @nuxt/ui

Added @nuxt/ui to the modules list. Created pages/index.vue, added a UButton in the page

This is what i get

This is my nuxt.config.ts file:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxt/ui']
})

[Nisthar]

What could be causing this issue? I have the Vue Official extension installed in my vscode

[redcodemohammed]

The same issue is here, this is what I have tried:

• I disabled all the vscode extensions and installed the Vue Official extension but I still had the same issue.
• I tried the previous step but with a fresh project created using this command pnpx nuxi init -t ui nuxt-project and also didn't work.
• The last thing I did was try it on a whole new machine, I did a fresh Node.js and vscode installation and made a new project to get the same problem again.

[benjamincanac]

Does this happen since the v2.0 release of language-tools? Would you be able to get the errors from TypeScript in VSCode? (Output -> TypeScript)

[Nisthar]

Does this happen since the v2.0 release of language-tools? Would you be able to get the errors from TypeScript in VSCode? (Output -> TypeScript)

I am not sure i haven't used nuxtui before the release. I uninstalled the volar extension and enabled typescipt.

This is what i get.

[Nisthar]

I have this error in Tailwind css extension

[redcodemohammed]

Does this happen since the v2.0 release of language-tools? Would you be able to get the errors from TypeScript in VSCode? (Output -> TypeScript)

I faced this error before the release of v2.0 of language-tools.

this is my TypeScript VSCode output: 2024-03-10 15:53:05.896 [info] Starting TS Server 2024-03-10 15:53:05.896 [info] Using tsserver from: /opt/visual-studio-code/resources/app/extensions/node_modules/typescript/lib/tsserver.js 2024-03-10 15:53:05.896 [info] <syntax> Forking... 2024-03-10 15:53:05.896 [info] <syntax> Starting... 2024-03-10 15:53:05.896 [info] <semantic> Forking... 2024-03-10 15:53:05.896 [info] <semantic> Starting...

[Nisthar]

@benjamincanac ok i installed v1.8 of vue extension and it seems to work. But i am still not getting types inside props like ui

[benjamincanac]

The types of ui prop have never worked, this will be fixed in v3. Do you have autocomplete for props like color on the UButton component for example?

[Nisthar]

Yeah i can see suggestions for the props itself but i don't get any for their values.

Also when i use v1.8.xx, i don't see the typescript extension running.

[Nisthar]

@benjamincanac any idea why the latest version of extension not working for me?

[benjamincanac]

With previous version, you had to install the TypeScript Vue Plugin (Volar) extension which is now deprecated.

I'm not sure as to why but I know there are some issues as stated in their release note: https://github.com/vuejs/language-tools/releases/tag/v2.0.6

[Nisthar]

@redcodemohammed is it working for you too?

[redcodemohammed]

@Nisthar When I use v1.8.xx, yes it works fine I got the exact same result as yours.

[redcodemohammed]

I tried disabling everything and installed only Vue extension and it is still not working, I even tested it on another system with fresh Node and vscode installation only to get the same problem.

[Onlymix]

So any new solutions or ideas with types of components on version 2.x ? All of components have type any (vue official 2.x)

[smappers]

So any new solutions or ideas with types of components on version 2.x ? All of components have type any (vue official 2.x)

I'm having the same issue. It looks like the types of the components in .vue aren't being picked up.

[sandros94]

Yes, there are a number of issues that are being fixed on the vuejs/language-tools side, mainly involving the ts server overriding itself when generating the intellisense.

2 days ago v2.0.7 has been released with a couple of these fixes, might be good doublechecking if you are on the latest release of that vscode extension.

[smappers]

v2.0.7 still doesn't solve my issue, so I've reverted back to v1.8 for now, since it seems to work okay there.

[sandros94]

v2.0.7 still doesn't solve my issue, so I've reverted back to v1.8 for now, since it seems to work okay there.

I still have to test a couple of things on my side. But yes I did have these issue too, with some still persisting based on the project I'm working on (?? 🤔)

[sharifzadesina]

This always happens to me for new files. No type hints for autoload. I always need to restart the vscode.

[timb-103]

Yep, rolling back to v1.8 worked for me. v2.0.7 made no difference.

[garlic-brewlabs]

Same deal, using VS Code + Vue official 2.0.8 and I get no typing with Nuxt UI nor does Tailwind Intellisense work, even after following the instructions here: https://ui.nuxt.com/getting-started/installation#intellisense

[DarkLite1]

Same issue here. Just created my first Nuxt project following the installation with Nuxt UI with intellisense.

Currently using vscode v1.88.0 with extensions:

• Vue - Official v2.0.10
• Tailwind CSS IntelliSense v0.10.5

Intellisense for classes is working fine:

Intellisense for components is working fine when starting to type <U... not when just typing UB...:

Intellisense for properties on the components is not working (typing la.. to see label fails):

Is there something else that needs to be configured?

// app.config.ts
export default defineAppConfig({})

// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default <Partial<Config>> {
  content: [
    'docs/content/**/*.md'
  ]
}

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  devtools: { enabled: true },
  ui: {
    global: true,
  },
})

// vscode/settings.json
{
    "vue.autoInsert.dotValue": true,
    "files.associations": {        "*.css": "tailwindcss"    },
    "editor.quickSuggestions": {        "strings": true    },
    "tailwindCSS.experimental.configFile": "tailwind.config.ts",
    "tailwindCSS.experimental.classRegex": [
        [            "ui:\\s*{([^)]*)\\s*}",   "[\"'`]([^\"'`]*).*?[\"'`]"        ],
        [            "/\\*\\s?ui\\s?\\*/\\s*{([^;]*)}",   ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"        ]
    ]
}

// package.json
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/ui": "^2.15.1",
    "nuxt": "^3.11.2",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  }
}

[sandros94]

@DarkLite1 you did everything correctly. Unfortunately this is still an upstream issue and it is still being debugged.

So far in all my reproduction I've been able to confirm that with Vue - Official v2.0.10 and VS Code 1.88 props should be resolved for locally defined components, while the pipe that should handle those coming from dependencies is still broken.

[DeVoresyah]

@DarkLite1 you did everything correctly. Unfortunately this is still an upstream issue and it is still being debugged.

So far in all my reproduction I've been able to confirm that with Vue - Official v2.0.10 and VS Code 1.88 props should be resolved for locally defined components, while the pipe that should handle those coming from dependencies is still broken.

I also faces same issue

[herlandroando]

It seems that using the latest version of the Vue Official extension fixes this. I have tried it on the Vue Official extension with latest version is 2.0.17 and the props on the Next UI component appear.

You can see it in this issue. Seems like some people are saying that too.

[sandros94]

Thanks @herlandroando, I just noticed that I wasn't on the latest version. I just did some various tests related to Nuxt projects, combining local, remote (layers) and packages components and they all seem to work as expected.

I'm going to close this for now, feel free to ping me here if you encounter any further issue after upgrading to 2.0.17 or later, but please provide info for: vscode version, installed extensions (possibly their versions) and component location.

[gianlucadifrancesco]

@Sandros94 I encountered a similar issue today after updating Vue - Official to v2.0.21. I downgraded to v2.0.19 and it seems to be working as expected again.

I'm not sure if this is the same issue, or if it's a bug in the Vue extension itself, but basically the intellisense seems bugged in a similar way and it's occurring from v2.0.20.

[sandros94]

@Sandros94 I encountered a similar issue today after updating Vue - Official to v2.0.21. I downgraded to v2.0.19 and it seems to be working as expected again.

I'm not sure if this is the same issue, or if it's a bug in the Vue extension itself, but basically the intellisense seems bugged in a similar way and it's occurring from v2.0.20.

There is currently an upstream (vscode 1.89) bug where Vue - Official isn't able to make intellisense work for freshly created vue files. I'm expecting a few edge cases until that is fixed, but it is so hard to reproduce and nuxt/ui isn't the only one affected.