How to use vuetify in vue typescript? #112

LazyRichard · 2019-09-17T05:08:47Z

Environment

Browsers: Firefox 69.0 (x64)
OS: Windows 10 1809

Steps to reproduce

vue create .

Vue CLI v3.11.0
? Generate project in current directory? Yes


Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a linter / formatter config: TSLint
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No


Vue CLI v3.11.0
✨  Creating project in C:\Users\JUNMIN\Documents\Projects\vue\vuets-vuetify.
�  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...


> [email protected] install C:\Users\JUNMIN\Documents\Projects\vue\vuets-vuetify\node_modules\yorkie
> node bin/install.js

setting up Git hooks
done


> [email protected] postinstall C:\Users\JUNMIN\Documents\Projects\vue\vuets-vuetify\node_modules\core-js
> node scripts/postinstall || echo "ignore"

added 1098 packages from 824 contributors and audited 27818 packages in 39.666s
found 0 vulnerabilities

�  Invoking generators...
�  Installing additional dependencies...

added 6 packages from 3 contributors and audited 27827 packages in 9.671s
found 0 vulnerabilities

⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project vuets-vuetify.
�  Get started with the following commands:

 $ npm run serve

vue add vuetify

�  Installing vue-cli-plugin-vuetify...

+ [email protected]
added 1 package from 1 contributor and audited 27828 packages in 9.267s
found 0 vulnerabilities

✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Default (recommended)

�  Invoking generator for vue-cli-plugin-vuetify...
�  Installing additional dependencies...

added 7 packages from 5 contributors and audited 29998 packages in 11.412s
found 0 vulnerabilities

⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
   The following files have been updated / added:

     src/assets/logo.svg
     src/plugins/vuetify.ts
     package-lock.json
     package.json
     public/index.html
     src/App.vue
     src/components/HelloWorld.vue
     src/main.ts

   You should review these changes with git diff and commit them.

npm run serve

> [email protected] serve C:\Users\JUNMIN\Documents\Projects\vue\vuets-vuetify
> vue-cli-service serve

 INFO  Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
10% building 2/2 modules 0 activei ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\JUNMIN\Documents\Projects\vue\vuets-vuetify\public
i ｢wds｣: 404s will fallback to /index.html
98% after emitting CopyPlugin

 DONE  Compiled successfully in 18236ms                                                                                                                                                                                                                  1:41:59 PM
WARNING in C:/Users/JUNMIN/Documents/Projects/vue/vuets-vuetify/src/main.ts
9:24 Missing trailing comma
     7 | new Vue({
     8 |   vuetify,
  >  9 |   render: (h) => h(App)
       |                        ^
    10 | }).$mount('#app');
    11 | 
ERROR in C:/Users/JUNMIN/Documents/Projects/vue/vuets-vuetify/src/main.ts
8:3 No overload matches this call.
  Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never> | undefined): CombinedVueInstance<Vue, object, object, object, Record<never, any>>', gave the following error.
    Argument of type '{ vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.
      Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.
  Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object> | undefined): CombinedVueInstance<Vue, object, object, object, Record<never, any>>', gave the following error.
    Argument of type '{ vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'.
      Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'.
  Overload 3 of 3, '(options?: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>> | undefined): CombinedVueInstance<...>', gave the following error.
    Argument of type '{ vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.
      Object literal may only specify known properties, and 'vuetify' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.
     6 | 
     7 | new Vue({
  >  8 |   vuetify,
       |   ^
     9 |   render: (h) => h(App)
    10 | }).$mount('#app');
    11 | 
ERROR in C:/Users/JUNMIN/Documents/Projects/vue/vuets-vuetify/src/plugins/vuetify.ts
2:21 Could not find a declaration file for module 'vuetify/lib'. 'C:/Users/JUNMIN/Documents/Projects/vue/vuets-vuetify/node_modules/vuetify/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/vuetify` if it exists or add a new declaration (.d.ts) file containing `declare module 'vuetify/lib';`
    1 | import Vue from 'vue';
  > 2 | import Vuetify from 'vuetify/lib';
      |                     ^
    3 | 
    4 | Vue.use(Vuetify);
    5 | 
Version: typescript 3.6.3, tslint 5.20.0
Time: 3564ms

add types in tsconfig.json

reference: #43 (comment)

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "vuetify"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

npm run serve

> [email protected] serve C:\Users\JUNMIN\Documents\Projects\vue\vuets-vuetify
> vue-cli-service serve

 INFO  Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
10% building 2/2 modules 0 activei ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\JUNMIN\Documents\Projects\vue\vuets-vuetify\public
i ｢wds｣: 404s will fallback to /index.html
98% after emitting CopyPlugin

 DONE  Compiled successfully in 17504ms                                                                                                                                                                                                                  1:49:30 PM
WARNING in C:/Users/JUNMIN/Documents/Projects/vue/vuets-vuetify/src/main.ts
9:24 Missing trailing comma
     7 | new Vue({
     8 |   vuetify,
  >  9 |   render: (h) => h(App)
       |                        ^
    10 | }).$mount('#app');
    11 | 
ERROR in C:/Users/JUNMIN/Documents/Projects/vue/vuets-vuetify/src/main.ts
8:3 No overload matches this call.
  Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never> | undefined): CombinedVueInstance<Vue, object, object, object, Record<never, any>>', gave the following error.
    Argument of type '{ vuetify: Vuetify; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.
      Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.
  Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object> | undefined): CombinedVueInstance<Vue, object, object, object, Record<never, any>>', gave the following error.
    Argument of type '{ vuetify: Vuetify; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'.
      Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'.
  Overload 3 of 3, '(options?: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>> | undefined): CombinedVueInstance<...>', gave the following error.
    Argument of type '{ vuetify: Vuetify; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.
      Object literal may only specify known properties, and 'vuetify' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.
     6 | 
     7 | new Vue({
  >  8 |   vuetify,
       |   ^
     9 |   render: (h) => h(App)
    10 | }).$mount('#app');
    11 | 
ERROR in D:/Users/JUNMIN/Documents/Projects/vue/vuets-vuetify/node_modules/vuetify/types/index.d.ts
55:10 Cannot find name 'DefaultData'.
    53 |   export interface ComponentOptions<
    54 |     V extends Vue,
  > 55 |     Data=DefaultData<V>,
       |          ^
    56 |     Methods=DefaultMethods<V>,
    57 |     Computed=DefaultComputed,
    58 |     PropsDef=PropsDefinition<DefaultProps>,
ERROR in D:/Users/JUNMIN/Documents/Projects/vue/vuets-vuetify/node_modules/vuetify/types/index.d.ts
56:13 Cannot find name 'DefaultMethods'.
    54 |     V extends Vue,
    55 |     Data=DefaultData<V>,
  > 56 |     Methods=DefaultMethods<V>,
       |             ^
    57 |     Computed=DefaultComputed,
    58 |     PropsDef=PropsDefinition<DefaultProps>,
    59 |     Props=DefaultProps> {
ERROR in D:/Users/JUNMIN/Documents/Projects/vue/vuets-vuetify/node_modules/vuetify/types/index.d.ts
57:14 Cannot find name 'DefaultComputed'.
    55 |     Data=DefaultData<V>,
    56 |     Methods=DefaultMethods<V>,
  > 57 |     Computed=DefaultComputed,
       |              ^
    58 |     PropsDef=PropsDefinition<DefaultProps>,
    59 |     Props=DefaultProps> {
    60 |     vuetify?: Vuetify
ERROR in D:/Users/JUNMIN/Documents/Projects/vue/vuets-vuetify/node_modules/vuetify/types/index.d.ts
58:14 Cannot find name 'PropsDefinition'.
    56 |     Methods=DefaultMethods<V>,
    57 |     Computed=DefaultComputed,
  > 58 |     PropsDef=PropsDefinition<DefaultProps>,
       |              ^
    59 |     Props=DefaultProps> {
    60 |     vuetify?: Vuetify
    61 |   }
ERROR in D:/Users/JUNMIN/Documents/Projects/vue/vuets-vuetify/node_modules/vuetify/types/index.d.ts
58:30 Cannot find name 'DefaultProps'.
    56 |     Methods=DefaultMethods<V>,
    57 |     Computed=DefaultComputed,
  > 58 |     PropsDef=PropsDefinition<DefaultProps>,
       |                              ^
    59 |     Props=DefaultProps> {
    60 |     vuetify?: Vuetify
    61 |   }
ERROR in D:/Users/JUNMIN/Documents/Projects/vue/vuets-vuetify/node_modules/vuetify/types/index.d.ts
59:11 Cannot find name 'DefaultProps'.
    57 |     Computed=DefaultComputed,
    58 |     PropsDef=PropsDefinition<DefaultProps>,
  > 59 |     Props=DefaultProps> {
       |           ^
    60 |     vuetify?: Vuetify
    61 |   }
    62 | }
Version: typescript 3.6.3, tslint 5.20.0
Time: 3731ms

  App running at:
  - Local:   http://localhost:8081/
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run npm run build

Reproduction Link

https://github.com/LazyRichard/vuetify-typescript

Temporary Solutions

Change import Vuetify from 'vuetify/lib'; to 'import Vuetify from 'vuetify'`

but when i change this, font is shows browser default.

Other comments

What am i missing to do?

The text was updated successfully, but these errors were encountered:

KaelWD · 2019-09-17T05:27:34Z

Duplicate of #43

We also aren't using typescript 3.6 yet, so our typings might be invalid with it.

Sergio1C · 2019-12-07T10:08:04Z

And so...using typescript with vue + vuetify out of box is imopossible until now?

rehdie · 2019-12-08T11:03:42Z

And so...using typescript with vue + vuetify out of box is imopossible until now?

I'm just starting a project with vuewjs, vuetify, typescript and electron. Since vuetify is written in typescript, there are already typings availabe (if you look in node_modules/vuetify, there is a subfolder types).

This worked for me:

In the file tsconfig.json I added the following to the compilerOptions:

 "typeRoots": [
      "./node_modules/@types",
      "./node_modules/vuetify/types"
    ]

and added "vuetify" to "types":

  "types": [
      ....
      "vuetify"
  ]

iamonuwa · 2019-12-10T12:27:57Z

And so...using typescript with vue + vuetify out of box is imopossible until now?

I'm just starting a project with vuewjs, vuetify, typescript and electron. Since vuetify is written in typescript, there are already typings availabe (if you look in node_modules/vuetify, there is a subfolder types).

This worked for me:

In the file tsconfig.json I added the following to the compilerOptions:
 "typeRoots": [
      "./node_modules/@types",
      "./node_modules/vuetify/types"
    ]
and added "vuetify" to "types":
  "types": [
      ....
      "vuetify"
  ]

This is the solution to the problem

thanks to .. vuetifyjs/vue-cli-plugins#112

vuetifyjs/vue-cli-plugins#112 69 Files | 399M | feature/custom-component | 11 files changed, 313 insertions(+), 109 deletions(-)

mmilojevic-dev · 2020-09-09T09:10:12Z

And so...using typescript with vue + vuetify out of box is imopossible until now?

I'm just starting a project with vuewjs, vuetify, typescript and electron. Since vuetify is written in typescript, there are already typings availabe (if you look in node_modules/vuetify, there is a subfolder types).
This worked for me:
In the file tsconfig.json I added the following to the compilerOptions:
 "typeRoots": [
      "./node_modules/@types",
      "./node_modules/vuetify/types"
    ]
and added "vuetify" to "types":
  "types": [
      ....
      "vuetify"
  ]
This is the solution to the problem

I have tried this, and everything else here suggested and the problem even still persists, can I get some further ideas? I am clueless and stuck pretty much and this is becoming quite frustrating.

These are my dependencies, if it means something right now:

"dependencies": {
    "axios": "^0.20.0",
    "core-js": "^3.6.5",
    "register-service-worker": "^1.7.1",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.2.0",
    "vuetify": "^2.2.11",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.14.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "material-design-icons-iconfont": "^6.1.0",
    "node-sass": "^4.12.0",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-cli-plugin-vuetify": "~2.0.7",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.3.0"
  },

yakryder · 2020-12-02T14:00:53Z

Ran into this with vue-cli 4.5.9 and typescript 3.9.7 and was able to resolve by merely adding "vuetify" to "types":

"types": [
      ...
      "vuetify"
  ]

Is that all it takes nowadays?

If so, would it be reasonable to have the vuetify plugin just handle this the same way vue-cli adds types for jest?

avfirsov · 2021-12-16T16:32:02Z

And so...using typescript with vue + vuetify out of box is imopossible until now?

I'm just starting a project with vuewjs, vuetify, typescript and electron. Since vuetify is written in typescript, there are already typings availabe (if you look in node_modules/vuetify, there is a subfolder types).

This worked for me:

In the file tsconfig.json I added the following to the compilerOptions:
 "typeRoots": [
      "./node_modules/@types",
      "./node_modules/vuetify/types"
    ]
and added "vuetify" to "types":
  "types": [
      ....
      "vuetify"
  ]

For me this did not worked. I just created this vuetify-shims.d.ts in src folder and it worked:

import Vue from 'vue';
import { Vuetify } from 'vuetify/types';

declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    vuetify?: Vuetify;
  }
}

A slight nuance: I also have a common vue-shims.d.ts in the same folder:

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

Nuance is that if I merge these two .d.ts into one .d.ts for some reason it will work no more. So I guess it is critical to separate these two declarations into two separate files.

danieldanielecki · 2022-01-03T15:48:12Z

With Nuxt.js didn't have any problems. It looks like @nuxtjs/vuetify handles everything related to TypeScript.

KaelWD closed this as completed Sep 17, 2019

mrdavidkovacs added a commit to mrdavidkovacs/AnniversariesApi that referenced this issue Jan 3, 2020

Vuetify ..

ffd1083

thanks to .. vuetifyjs/vue-cli-plugins#112

valentingavran mentioned this issue May 8, 2020

Compatibility with typescript xkjyeah/vue-google-maps#560

Open

borgytan mentioned this issue Jun 19, 2020

[Bug Report] Cannot build Vue + Vuetify (a la carte) + Typescript project vuetifyjs/vuetify#11683

Closed

avimehenwal added a commit to avimehenwal/vue-components that referenced this issue Jul 28, 2020

fix(vuetify): 💄 typescript types

09a443b

vuetifyjs/vue-cli-plugins#112 69 Files | 399M | feature/custom-component | 11 files changed, 313 insertions(+), 109 deletions(-)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use vuetify in vue typescript? #112

How to use vuetify in vue typescript? #112

LazyRichard commented Sep 17, 2019

KaelWD commented Sep 17, 2019

Sergio1C commented Dec 7, 2019

rehdie commented Dec 8, 2019 •

edited

Loading

iamonuwa commented Dec 10, 2019

mmilojevic-dev commented Sep 9, 2020 •

edited

Loading

yakryder commented Dec 2, 2020 •

edited

Loading

avfirsov commented Dec 16, 2021

danieldanielecki commented Jan 3, 2022

How to use vuetify in vue typescript? #112

How to use vuetify in vue typescript? #112

Comments

LazyRichard commented Sep 17, 2019

Environment

Steps to reproduce

Reproduction Link

Temporary Solutions

Other comments

KaelWD commented Sep 17, 2019

Sergio1C commented Dec 7, 2019

rehdie commented Dec 8, 2019 • edited Loading

iamonuwa commented Dec 10, 2019

mmilojevic-dev commented Sep 9, 2020 • edited Loading

yakryder commented Dec 2, 2020 • edited Loading

avfirsov commented Dec 16, 2021

danieldanielecki commented Jan 3, 2022

rehdie commented Dec 8, 2019 •

edited

Loading

mmilojevic-dev commented Sep 9, 2020 •

edited

Loading

yakryder commented Dec 2, 2020 •

edited

Loading