In Nuxt project,Auto completion/IntelliSense is not working properly. #1161

njzydark · 2019-03-21T04:56:11Z

I have searched through existing issues
I have read through docs
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.

Methods can't be auto complete

Data can't be auto complete

Reproducible Case

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

octref · 2019-03-21T23:52:30Z

Please give a repro case.

njzydark · 2019-03-22T00:51:17Z

Please give a repro case.

Sorry about that,I have updated.

marco-quintella · 2019-03-24T18:52:01Z

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

njzydark · 2019-04-17T00:33:30Z

@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 · 2019-04-18T05:25:03Z

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 · 2019-04-26T06:00:43Z

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 · 2019-05-14T11:30:34Z

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 · 2019-05-16T09:23:22Z

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 · 2019-05-16T10:22:14Z

@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 · 2019-05-16T15:22:54Z

@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 · 2019-05-16T15:48:17Z

@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 · 2019-05-21T19:42:16Z

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 · 2019-12-21T02:17:10Z

@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 vuejs/vue#9873 I updated typescript globally and it worked fine.

octref · 2020-02-11T23:51:19Z

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

meatherly · 2020-06-19T17:28:17Z

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 · 2020-06-19T17:42:35Z

🤦‍♂️ 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.

rchl · 2020-06-19T18:33:50Z

🤦‍♂️ 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 · 2020-09-16T02:00:45Z

🤦‍♂️ 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 · 2020-09-16T08:32:54Z

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

code-is-art · 2020-09-16T16:41:45Z

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 · 2020-09-16T21:54:58Z

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.

octref added the need-more-info label Mar 21, 2019

njzydark mentioned this issue Apr 12, 2019

The Setting of Vetur in VSCode Not Working in Nuxt.JS #1195

Closed

njzydark changed the title ~~In Nuxt project,Auto completion is not working properly.~~ In Nuxt project,Auto completion/IntelliSense is not working properly. Apr 17, 2019

njzydark mentioned this issue Apr 18, 2019

Computed Property this IntelliSense broken nuxt/nuxt#5522

Closed

njzydark closed this as completed Feb 16, 2020

rchl mentioned this issue Jun 19, 2020

intellisense does not work correctly if existing custom properties #481

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

In Nuxt project,Auto completion/IntelliSense is not working properly. #1161

In Nuxt project,Auto completion/IntelliSense is not working properly. #1161

njzydark commented Mar 21, 2019 •

edited

Loading

octref commented Mar 21, 2019

njzydark commented Mar 22, 2019

marco-quintella commented Mar 24, 2019

njzydark commented Apr 17, 2019 •

edited

Loading

njzydark commented Apr 18, 2019

moltar commented Apr 26, 2019

renestalder commented May 14, 2019

njzydark commented May 16, 2019 •

edited

Loading

renestalder commented May 16, 2019

njzydark commented May 16, 2019

renestalder commented May 16, 2019 •

edited

Loading

renestalder commented May 21, 2019

slushnys commented Dec 21, 2019

octref commented Feb 11, 2020

meatherly commented Jun 19, 2020

meatherly commented Jun 19, 2020

rchl commented Jun 19, 2020 •

edited

Loading

code-is-art commented Sep 16, 2020 •

edited

Loading

rchl commented Sep 16, 2020

code-is-art commented Sep 16, 2020

code-is-art commented Sep 16, 2020 •

edited

Loading

In Nuxt project,Auto completion/IntelliSense is not working properly. #1161

In Nuxt project,Auto completion/IntelliSense is not working properly. #1161

Comments

njzydark commented Mar 21, 2019 • edited Loading

Info

Problem

Reproducible Case

octref commented Mar 21, 2019

njzydark commented Mar 22, 2019

marco-quintella commented Mar 24, 2019

njzydark commented Apr 17, 2019 • edited Loading

njzydark commented Apr 18, 2019

moltar commented Apr 26, 2019

renestalder commented May 14, 2019

njzydark commented May 16, 2019 • edited Loading

renestalder commented May 16, 2019

njzydark commented May 16, 2019

renestalder commented May 16, 2019 • edited Loading

renestalder commented May 21, 2019

slushnys commented Dec 21, 2019

octref commented Feb 11, 2020

meatherly commented Jun 19, 2020

meatherly commented Jun 19, 2020

rchl commented Jun 19, 2020 • edited Loading

code-is-art commented Sep 16, 2020 • edited Loading

rchl commented Sep 16, 2020

code-is-art commented Sep 16, 2020

code-is-art commented Sep 16, 2020 • edited Loading

njzydark commented Mar 21, 2019 •

edited

Loading

njzydark commented Apr 17, 2019 •

edited

Loading

njzydark commented May 16, 2019 •

edited

Loading

renestalder commented May 16, 2019 •

edited

Loading

rchl commented Jun 19, 2020 •

edited

Loading

code-is-art commented Sep 16, 2020 •

edited

Loading

code-is-art commented Sep 16, 2020 •

edited

Loading