Vetur: In Nuxt project,Auto completion/IntelliSense is not working properly.

[njzydark]

• [x] I have searched through existing issues
• [x] I have read through docs
• [x] I have read FAQ

Info

• Platform: macOS 10.14.3
• Vetur version: 0.18.1
• VS Code version: 1.33.1

Problem

This is my project created by create-nuxt-app.In another project created by vue-cli,Auto completion works right.

1. Methods can't be auto complete

1. Data can't be auto complete

Reproducible Case

1. Create project by the latest create-nuxt-app(No custom server framework,No feature,No ui framework,No custom test framework,With universal mode)
2. In index.vue I create some data and methods,but when I use this,the data and methods can't be auto complete

[octref]

Please give a repro case.

[njzydark]

Please give a repro case.

Sorry about that,I have updated.

[marco-quintella]

@octref
Does it seem the same from my case #1133, isn't?

[njzydark]

@octref The auto completion or IntelliSense works fine when I follow the steps below.

• I need npm i vue,so the package.json will have a vue dependency
• The vue file can't contain custom attributes or properties unique to nuxt such as layout,fetch,asyncData...

This is a example that works fine.

codesandbox

So, Can vetur make some adjustments to the nuxt project?

[njzydark]

I extracted the files in node_modules/@nuxt/vue-app/types and placed them in nuxt.d.ts below the root path of the project. The IntelliSense works fine.

Because I don't know much about typescript, I don't know the specific reason.

[moltar]

I am also experiencing this issue.

Repro (using this starter):

cd /tmp
export PRJ="my-project-ts-test"
vue init nuxt-community/typescript-template $PRJ
cd $PRJ
npm i
code .
code pages/index.vue

Now modify the component to match the following:

export default class extends Vue {
  @State people: Person

  asyncData(ctx) {
  }
}

Now hover on the ctx variable and it is typed as any.

---

---

Thank you!

[renestalder]

I actually have the same problem on v0.20.0, that this is always any (with Vue.extend(), not class based components). But also without adding any of the Nuxt provided extensions on the component. So I wonder if the typings of Nuxt or other plugins somehow break it.

[njzydark]

I actually have the same problem on v0.20.0, that this is always any (with Vue.extend(), not class based components). But also without adding any of the Nuxt provided extensions on the component. So I wonder if the typings of Nuxt or other plugins somehow break it.

After install the latest vetur(0.21.0),only add this file to the root directory and all work's fine.

nuxt.d.ts

// 提取自node_modules/@nuxt/vue-app/types 用于解决vetur下AutoCompletion/IntelliSense工作不正常的问题
import Vue from 'vue'
import { Store } from 'vuex'
import VueRouter, { Route } from 'vue-router'
import { MetaInfo } from 'vue-meta'

type Dictionary<T> = { [key: string]: T }
type NuxtState = Dictionary<any>

interface ErrorParams {
  statusCode?: number
  message?: string
}

interface Context {
  app: Vue
  /**
   * @deprecated Use process.client instead
   */
  isClient: boolean
  /**
   * @deprecated Use process.server instead
   */
  isServer: boolean
  /**
   * @deprecated Use process.static instead
   */
  isStatic: boolean
  isDev: boolean
  isHMR: boolean
  route: Route
  store: Store<any>
  env: Dictionary<any>
  query: Route['query']
  nuxtState: NuxtState
  req: Request
  res: Response
  params: Route['params']
  payload: any
  redirect(status: number, path: string, query?: Route['query']): void
  redirect(path: string, query?: Route['query']): void
  error(params: ErrorParams): void
  beforeNuxtRender(fn: (params: { Components: VueRouter['getMatchedComponents']; nuxtState: NuxtState }) => void): void
}

interface Transition {
  name?: string
  mode?: string
  css?: boolean
  duration?: number
  type?: string
  enterClass?: string
  enterToClass?: string
  enterActiveClass?: string
  leaveClass?: string
  leaveToClass?: string
  leaveActiveClass?: string
  beforeEnter?(el: HTMLElement): void
  enter?(el: HTMLElement, done: Function): void
  afterEnter?(el: HTMLElement): void
  enterCancelled?(el: HTMLElement): void
  beforeLeave?(el: HTMLElement): void
  leave?(el: HTMLElement, done: Function): void
  afterLeave?(el: HTMLElement): void
  leaveCancelled?(el: HTMLElement): void
}

type Middleware = string | ((ctx: Context, cb: Function) => Promise<void> | void)

declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    asyncData?(ctx: Context): object | undefined
    fetch?(ctx: Context): Promise<void> | void
    head?: MetaInfo | (() => MetaInfo)
    key?: string | ((to: Route) => string)
    layout?: string | ((ctx: Context) => string)
    loading?: boolean
    middleware?: Middleware | Middleware[]
    scrollToTop?: boolean
    transition?: string | Transition | ((to: Route, from: Route) => string)
    validate?(ctx: Context): Promise<boolean> | boolean
    watchQuery?: boolean | string[]
  }
}

interface NuxtLoading {
  fail?(): NuxtLoading
  finish(): NuxtLoading
  increase?(num: number): NuxtLoading
  pause?(): NuxtLoading
  start(): NuxtLoading
}

interface NuxtApp {
  $loading: NuxtLoading
  isOffline: boolean
  isOnline: boolean
}

declare module 'vue/types/vue' {
  interface Vue {
    $nuxt: NuxtApp
  }
}

[renestalder]

@0njzy0 Sadly, that doesn't work for me. this is still any in my case. I really think the plugins types may break Vetur. When I made a syntax typo in Vue-Apollo yesterday, immediately, this became a vue instance (but at the same time didn't see my props and data because of the syntax error).

I probably will have to setup a test project from scratch and slowly applying my configurations and plugins to find out from which point on Vetur breaks.

Are there any known issues with Visual Studio Code plugins that might interrupt Vetur?

[njzydark]

@0njzy0 Sadly, that doesn't work for me. this is still any in my case. I really think the plugins types may break Vetur. When I made a syntax typo in Vue-Apollo yesterday, immediately, this became a vue instance (but at the same time didn't see my props and data because of the syntax error).

I probably will have to setup a test project from scratch and slowly applying my configurations and plugins to find out from which point on Vetur breaks.

Are there any known issues with Visual Studio Code plugins that might interrupt Vetur?

I clone your project(nuxt-netlify-cms-starter-template),auto completion or intellisense works fine

[renestalder]

@0njzy0 Fin, but that's not the project where I face the problem. I have it in a TypeScript project with quite some Vue plugins.

[renestalder]

So, as I face this problem with TypeScript while the initial ticket description talks about JavaScript, I might actually have another problem or solution.

What I already did now:

• Use create-nuxt-app to create a new project.
• Add TypeScript based on the Nuxt documentation
• Rewrite the code to use TypeScript

Until here, everything works fine, without moving any typing files, as the tsconfig.json can reference to the typings in the node_modules folder.

What I then did is installing a plugin, namely @nuxtjs/apollo and vue-apollo. Earlier says me to install Vue on top of Nuxt (which seems like wrong). After installing Vue additionally in the Nuxt project (which is not needed out of the box), the typings of Vetur broke, but not the build. Uninstalling Vue then breaks the project for whatever reason. I don't exactly understand how the dependencies work with each other here.

So I repeated the whole steps again, without installing Vue on top of Nuxt and that so far doesn't seem to break Vetur.

All that yet doesn't make any sense to me, so I test a bit further.

[slushnys]

@renestalder have you been able to solve this? If not, whats your global typescript version? I've been having this same thing and when i noticed similar issues with type inference on 3.4 typescript version https://github.com/vuejs/vue/issues/9873 I updated typescript globally and it worked fine.

[octref]

Is this still an issue when you use latest version? Should be resolved by us updating TS dependency.

[meatherly]

Hopefully I'm posting under the right issue 🤞

I'm still having this issue on a Nuxt JS project that uses @nuxtjs/apollo. I've narrowed my problem down to apollo property. When I add this to the component it breaks intellisense. I've made a repo to reproduce this problem https://github.com/meatherly/vetur-apollo-intellisense.

If you go to the pages/index.vue file and remove/comment-out the apollo prop then intellisense starts working again in the method increment.

I believe this isn't just @nuxtjs/apollo it seems to be anything that isn't apart of the standard vue component.

Let me know if there is anything I can do to help. Love this extension!

[meatherly]

🤦‍♂️ I just came across this issue and it solved my problem. https://github.com/vuejs/vetur/issues/481

adding a global.d.ts file to the root of my project solved it.

[rchl]

🤦‍♂️ I just came across this issue and it solved my problem. #481

adding a global.d.ts file to the root of my project solved it.

Proper solution is to make your project aware of vue-apollo types.

In your jsonconfig.json or tsconfig.json:

{
  "compilerOptions": {
    // ...
    "types": [
      "@nuxtjs/apollo",
      "vue-apollo"
    ]
  },
}

[code-is-art]

🤦‍♂️ I just came across this issue and it solved my problem. #481
adding a global.d.ts file to the root of my project solved it.

Proper solution is to make your project aware of vue-apollo types.

In your jsonconfig.json or tsconfig.json:

{
  "compilerOptions": {
    // ...
    "types": [
      "@nuxtjs/apollo",
      "vue-apollo"
    ]
  },
}

This will not work with jsconfig.json as types is not supported. In this case the global.d.ts is the only workaround.

[rchl]

What's the reason for using jsconfig.json instead of tsconfig.json? The latter works in JS projects also.

[code-is-art]

What's the reason for using jsconfig.json instead of tsconfig.json? The latter works in JS projects also.

yes, you are right of course, I needed to restart vscode.

[code-is-art]

Correction, as soon as I try to import the vue package typescript intellisense fails. tsconfig.json doesn't seem work with non-typescript projects and vue, see here. Hopefully Vue 3 will change that.