How to use vuetify in vue typescript?

[LazyRichard]

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...


> yorkie@2.0.0 install C:\Users\JUNMIN\Documents\Projects\vue\vuets-vuetify\node_modules\yorkie
> node bin/install.js

setting up Git hooks
done


> core-js@2.6.9 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...

+ vue-cli-plugin-vuetify@0.6.3
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

> vuets-vuetify@0.1.0 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

> vuets-vuetify@0.1.0 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?

[KaelWD]

Duplicate of #43

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

[Sergio1C]

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

[rehdie]

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]

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

[mmilojevic-dev]

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]

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]

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]

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