[Bug Report] Typescript 'vue add vuetify' creates non-functional project #43

amritk · 2018-09-28T22:30:14Z

Ubuntu 18.04
@vue/cli 3.0.4

➜ vue create v

Vue CLI v3.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: plugin


Vue CLI v3.0.4
✨  Creating project in /home/amritk/apps/pulls/v.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.10.1
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...

success Saved lockfile.
Done in 8.01s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.10.1
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
Done in 3.76s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project v.
👉  Get started with the following commands:

 $ cd v
 $ yarn serve

➜ cd v
➜ vue add vuetify

📦  Installing vue-cli-plugin-vuetify...

yarn add v1.10.1
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
Done in 0.25s.
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes
? Use custom theme? No
? Use custom properties (CSS variables)? No
? Select icon font md
? Use fonts as a dependency (for Electron or offline)? No
? Use a-la-carte components? Yes
? Use babel/polyfill? Yes
? Select locale en

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

yarn install v1.10.1
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 3.00s.
⚓  Running completion hooks...

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

     .browserslistrc
     src/plugins/vuetify.ts
     babel.config.js
     package.json
     public/index.html
     src/App.vue
     src/assets/logo.png
     src/components/HelloWorld.vue
     src/main.ts
     yarn.lock

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

➜ yarn serve

yarn run v1.10.1
warning ../package.json: No license field
$ vue-cli-service serve
 INFO  Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
 94% after seal                                                                        

 ERROR  Failed to compile with 1 errors                                                                 3:23:17 PM

Failed to resolve loader: babel-loader
You may need to install it.
Type checking and linting in progress...
WARNING in /home/amritk/apps/pulls/v/src/App.vue
73:49 Missing semicolon
    71 | 
    72 | <script>
  > 73 | import HelloWorld from './components/HelloWorld'
       |                                                 ^
    74 | 
    75 | export default {
    76 |   name: 'App',
WARNING in /home/amritk/apps/pulls/v/src/App.vue
78:15 Missing trailing comma
    76 |   name: 'App',
    77 |   components: {
  > 78 |     HelloWorld
       |               ^
    79 |   },
    80 |   data () {
    81 |     return {
WARNING in /home/amritk/apps/pulls/v/src/App.vue
80:7 Spaces before function parens are disallowed
    78 |     HelloWorld
    79 |   },
  > 80 |   data () {
       |       ^
    81 |     return {
    82 |       clipped: false,
    83 |       drawer: true,
WARNING in /home/amritk/apps/pulls/v/src/App.vue
87:25 Missing trailing comma
    85 |       items: [{
    86 |         icon: 'bubble_chart',
  > 87 |         title: 'Inspire'
       |                         ^
    88 |       }],
    89 |       miniVariant: false,
    90 |       right: true,
WARNING in /home/amritk/apps/pulls/v/src/App.vue
92:26 Missing trailing comma
    90 |       right: true,
    91 |       rightDrawer: false,
  > 92 |       title: 'Vuetify.js'
       |                          ^
    93 |     }
    94 |   }
    95 | }
WARNING in /home/amritk/apps/pulls/v/src/App.vue
93:6 Missing semicolon
    91 |       rightDrawer: false,
    92 |       title: 'Vuetify.js'
  > 93 |     }
       |      ^
    94 |   }
    95 | }
    96 | </script>
WARNING in /home/amritk/apps/pulls/v/src/App.vue
94:4 Missing trailing comma
    92 |       title: 'Vuetify.js'
    93 |     }
  > 94 |   }
       |    ^
    95 | }
    96 | </script>
    97 | 
WARNING in /home/amritk/apps/pulls/v/src/App.vue
95:2 Missing semicolon
    93 |     }
    94 |   }
  > 95 | }
       |  ^
    96 | </script>
    97 | 
WARNING in /home/amritk/apps/pulls/v/src/components/HelloWorld.vue
23:16 Missing trailing comma
    21 |   name: 'HelloWorld',
    22 |   props: {
  > 23 |     msg: String
       |                ^
    24 |   }
    25 | }
    26 | </script>
WARNING in /home/amritk/apps/pulls/v/src/components/HelloWorld.vue
24:4 Missing trailing comma
    22 |   props: {
    23 |     msg: String
  > 24 |   }
       |    ^
    25 | }
    26 | </script>
    27 | 
WARNING in /home/amritk/apps/pulls/v/src/components/HelloWorld.vue
25:2 Missing semicolon
    23 |     msg: String
    24 |   }
  > 25 | }
       |  ^
    26 | </script>
    27 | 
    28 | <!-- Add "scoped" attribute to limit CSS to this component only -->
WARNING in /home/amritk/apps/pulls/v/src/main.ts
1:25 Missing semicolon
  > 1 | import '@babel/polyfill'
      |                         ^
    2 | import Vue from 'vue';
    3 | import './plugins/vuetify'
    4 | import App from './App.vue';
WARNING in /home/amritk/apps/pulls/v/src/main.ts
3:27 Missing semicolon
    1 | import '@babel/polyfill'
    2 | import Vue from 'vue';
  > 3 | import './plugins/vuetify'
      |                           ^
    4 | import App from './App.vue';
    5 | import './registerServiceWorker';
    6 | 
WARNING in /home/amritk/apps/pulls/v/src/plugins/vuetify.ts
1:22 Missing semicolon
  > 1 | import Vue from 'vue'
      |                      ^
    2 | import {
    3 |   Vuetify,
    4 |   VApp,
WARNING in /home/amritk/apps/pulls/v/src/plugins/vuetify.ts
12:14 Missing trailing comma
    10 |   VGrid,
    11 |   VToolbar,
  > 12 |   transitions
       |              ^
    13 | } from 'vuetify'
    14 | import 'vuetify/src/stylus/app.styl'
    15 | 
WARNING in /home/amritk/apps/pulls/v/src/plugins/vuetify.ts
13:17 Missing semicolon
    11 |   VToolbar,
    12 |   transitions
  > 13 | } from 'vuetify'
       |                 ^
    14 | import 'vuetify/src/stylus/app.styl'
    15 | 
    16 | Vue.use(Vuetify, {
WARNING in /home/amritk/apps/pulls/v/src/plugins/vuetify.ts
14:37 Missing semicolon
    12 |   transitions
    13 | } from 'vuetify'
  > 14 | import 'vuetify/src/stylus/app.styl'
       |                                     ^
    15 | 
    16 | Vue.use(Vuetify, {
    17 |   components: {
WARNING in /home/amritk/apps/pulls/v/src/plugins/vuetify.ts
26:16 Missing trailing comma
    24 |     VGrid,
    25 |     VToolbar,
  > 26 |     transitions
       |                ^
    27 |   },
    28 |   iconfont: 'md',
    29 | })
WARNING in /home/amritk/apps/pulls/v/src/plugins/vuetify.ts
29:3 Missing semicolon
    27 |   },
    28 |   iconfont: 'md',
  > 29 | })
       |   ^
    30 | 
ERROR in /home/amritk/apps/pulls/v/src/plugins/vuetify.ts
4:3 Module '"/home/amritk/apps/pulls/v/node_modules/vuetify/types/index"' has no exported member 'VApp'.
    2 | import {
    3 |   Vuetify,
  > 4 |   VApp,
      |   ^
    5 |   VNavigationDrawer,
    6 |   VFooter,
    7 |   VList,
ERROR in /home/amritk/apps/pulls/v/src/plugins/vuetify.ts
5:3 Module '"/home/amritk/apps/pulls/v/node_modules/vuetify/types/index"' has no exported member 'VNavigationDrawer'.
    3 |   Vuetify,
    4 |   VApp,
  > 5 |   VNavigationDrawer,
      |   ^
    6 |   VFooter,
    7 |   VList,
    8 |   VBtn,
ERROR in /home/amritk/apps/pulls/v/src/plugins/vuetify.ts
6:3 Module '"/home/amritk/apps/pulls/v/node_modules/vuetify/types/index"' has no exported member 'VFooter'.
    4 |   VApp,
    5 |   VNavigationDrawer,
  > 6 |   VFooter,
      |   ^
    7 |   VList,
    8 |   VBtn,
    9 |   VIcon,
ERROR in /home/amritk/apps/pulls/v/src/plugins/vuetify.ts
7:3 Module '"/home/amritk/apps/pulls/v/node_modules/vuetify/types/index"' has no exported member 'VList'.
     5 |   VNavigationDrawer,
     6 |   VFooter,
  >  7 |   VList,
       |   ^
     8 |   VBtn,
     9 |   VIcon,
    10 |   VGrid,
ERROR in /home/amritk/apps/pulls/v/src/plugins/vuetify.ts
8:3 Module '"/home/amritk/apps/pulls/v/node_modules/vuetify/types/index"' has no exported member 'VBtn'.
     6 |   VFooter,
     7 |   VList,
  >  8 |   VBtn,
       |   ^
     9 |   VIcon,
    10 |   VGrid,
    11 |   VToolbar,
ERROR in /home/amritk/apps/pulls/v/src/plugins/vuetify.ts
9:3 Module '"/home/amritk/apps/pulls/v/node_modules/vuetify/types/index"' has no exported member 'VIcon'.
     7 |   VList,
     8 |   VBtn,
  >  9 |   VIcon,
       |   ^
    10 |   VGrid,
    11 |   VToolbar,
    12 |   transitions
ERROR in /home/amritk/apps/pulls/v/src/plugins/vuetify.ts
10:3 Module '"/home/amritk/apps/pulls/v/node_modules/vuetify/types/index"' has no exported member 'VGrid'.
     8 |   VBtn,
     9 |   VIcon,
  > 10 |   VGrid,
       |   ^
    11 |   VToolbar,
    12 |   transitions
    13 | } from 'vuetify'
ERROR in /home/amritk/apps/pulls/v/src/plugins/vuetify.ts
11:3 Module '"/home/amritk/apps/pulls/v/node_modules/vuetify/types/index"' has no exported member 'VToolbar'.
     9 |   VIcon,
    10 |   VGrid,
  > 11 |   VToolbar,
       |   ^
    12 |   transitions
    13 | } from 'vuetify'
    14 | import 'vuetify/src/stylus/app.styl'
ERROR in /home/amritk/apps/pulls/v/src/plugins/vuetify.ts
12:3 Module '"/home/amritk/apps/pulls/v/node_modules/vuetify/types/index"' has no exported member 'transitions'.
    10 |   VGrid,
    11 |   VToolbar,
  > 12 |   transitions
       |   ^
    13 | } from 'vuetify'
    14 | import 'vuetify/src/stylus/app.styl'
    15 | 
ERROR in /home/amritk/apps/pulls/v/src/plugins/vuetify.ts
16:9 'Vuetify' only refers to a type, but is being used as a value here.
    14 | import 'vuetify/src/stylus/app.styl'
    15 | 
  > 16 | Vue.use(Vuetify, {
       |         ^
    17 |   components: {
    18 |     VApp,
    19 |     VNavigationDrawer,
Version: typescript 3.1.1, tslint 5.11.0
Time: 1830ms

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

jappyjan · 2018-10-09T08:15:45Z

same problem over here...

probably because we are using the typescript plugin ?

KaelWD · 2018-10-09T11:45:05Z

I need to finish #15

amritk · 2018-10-09T21:57:57Z

@KaelWD is there a workaround or something we can use in the mean time?

amritk · 2018-10-15T20:53:42Z

@jappyjan while that is being worked out, I have been using the old way of doing things.
Import like this:
plugins/vuetify.ts

import Vue from 'vue'
import transitions from 'vuetify/es5/components/transitions'
import VApp from 'vuetify/es5/components/VApp'
import VBtn from 'vuetify/es5/components/VBtn'
import VFooter from 'vuetify/es5/components/VFooter'
import VGrid from 'vuetify/es5/components/VGrid'
import VIcon from 'vuetify/es5/components/VIcon'
import VList from 'vuetify/es5/components/VList'
import VNavigationDrawer from 'vuetify/es5/components/VNavigationDrawer'
import VToolbar from 'vuetify/es5/components/VToolbar'
import Vuetify from 'vuetify/es5/components/Vuetify'

Vue.use(Vuetify, {
    components: {
        VApp,
        VNavigationDrawer,
        VFooter,
        VList,
        VBtn,
        VIcon,
        VGrid,
        VToolbar,
        transitions
    },
    theme: {
        primary: '#008940',
        accent: '#0279D7',
        secondary: '#9F9F9F',
        info: '#0279D7',
        warning: '#B71C1C',
        error: '#B71C1C',
        success: '#4CAf50'
    },
    customProperties: true,
    iconfont: 'md'
})

Then add the types individually:
shims-vue.d.ts

declare module 'vuetify/es5/components/Vuetify'
declare module 'vuetify/es5/components/VApp'
declare module 'vuetify/es5/components/VNavigationDrawer'
declare module 'vuetify/es5/components/VFooter'
declare module 'vuetify/es5/components/VList'
declare module 'vuetify/es5/components/VBtn'
declare module 'vuetify/es5/components/VIcon'
declare module 'vuetify/es5/components/VGrid'
declare module 'vuetify/es5/components/VToolbar'
declare module 'vuetify/es5/components/transitions'
declare module 'vuetify/es5/components/VDivider'
declare module 'vuetify/src/components/VToolbar/VToolbar'
declare module 'vuetify/src/components/VToolbar/VToolbarSideIcon'
declare module 'vuetify/src/components/VNavigationDrawer/VNavigationDrawer'
declare module 'vuetify/src/components/VList'
declare module 'vuetify/src/components/VList/VListTile'
declare module 'vuetify/src/components/VSubheader/VSubheader'
declare module 'vuetify/src/components/VFooter/VFooter'
declare module 'vuetify/src/components/VStepper/VStepper'
declare module 'vuetify/src/components/VStepper/VStepperContent'
declare module 'vuetify/src/components/VStepper/VStepperStep'
declare module 'vuetify/src/components/VLabel/VLabel'
declare module 'vuetify/src/components/VSwitch/VSwitch'
declare module 'vuetify/es5/components/VCard'
declare module 'vuetify/es5/components/VTextarea'
declare module 'vuetify/src/components/VGrid/VContent'

jappyjan · 2018-10-15T21:01:05Z

I actually just added a bunch of

/* @ts-ignore /*

Statements ^^

Works kinda the same, with less code to write...

amritk · 2018-10-15T21:06:19Z

lol yea that would do it, cheers

amritk · 2018-10-17T18:35:28Z

@KaelWD it looks like that pull request got closed due to inactivity, is there another one that aims to fix typescript?

amritk · 2018-10-24T20:49:01Z

The new error with, with a fresh build, with Vuetify loader is

ERROR in /home/amritk/apps/pulls/test/src/plugins/vuetify.ts
2:21 Could not find a declaration file for module 'vuetify/lib'. '/home/amritk/apps/pulls/test/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';`

I believe we just need to add some types and its good to go!

KaelWD · 2018-10-25T01:07:03Z

It has types, the plugin just needs to add it to tsconfig.

MisterGoodcat · 2018-11-01T15:58:13Z

It has types, the plugin just needs to add it to tsconfig.

Thanks for helping me on Discord to fix it.
To clarify: you can put the required type hint in your app's tsconfig to fix this, like

"compilerOptions": {
    "types": ["vuetify"],

jappyjan · 2018-11-02T13:10:32Z

this solution did not work for me... still gettint warnings for every component of Vuetify im using...

praseodym · 2018-11-04T01:05:41Z

It has types, the plugin just needs to add it to tsconfig.

Thanks for helping me on Discord to fix it.
To clarify: you can put the required type hint in your app's tsconfig to fix this, like
"compilerOptions": {
    "types": ["vuetify"],

This worked for me. I imported vuetify instead of vuetify/lib before, which fixes the TypeScript error, but increases the bundle size (tree shaking fails to do its job?).

MisterGoodcat · 2018-11-04T18:06:48Z

this solution did not work for me... still gettint warnings for every component of Vuetify im using...

No need to downvote... my fix is only for the single Could not find a declaration file for module 'vuetify/lib' error discussed later on, not the initial issue with errors for each component. I never ran into that one myself, and a newly created app also doesn't have this problem. Maybe update all packages to their latest version?

amritk · 2018-11-05T19:53:41Z

It has types, the plugin just needs to add it to tsconfig.

Thanks for helping me on Discord to fix it.
To clarify: you can put the required type hint in your app's tsconfig to fix this, like
"compilerOptions": {
    "types": ["vuetify"],
This worked for me. I imported vuetify instead of vuetify/lib before, which fixes the TypeScript error, but increases the bundle size (tree shaking fails to do its job?).

@praseodym importing vuetify instead of vuetify/lib will NOT be a la carte. The bundle size is bigger because it will import all of the components.

amritk · 2018-12-04T00:37:26Z

I believe this is fixed now so I am closing

KaelWD · 2018-12-20T14:01:49Z

I believe this is fixed now

It isn't, we still need to modify tsconfig.

novanettor · 2019-02-25T13:44:27Z

I believe this is fixed now

It isn't, we still need to modify tsconfig.

I ran into this problem today, with the latest vue/vuetify. @MisterGoodcat's fix worked for me.

irfandyj · 2019-03-02T13:23:51Z

Is this solved yet? I'm new to Vuetify and Vue, however after I do vue add vuetify I get a bunch of

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I tried @praseodym solution by changing vuetify/lib to vuetify, and apparently it now loads with no errors.

However, as @amritk said, it will not be a-la-carte, and would be oversized, are there any solutions toward this if I want to use it a-la-carte?

GisellePerez · 2019-03-18T19:13:27Z

@jippy89 I faced the same issue and this documentation helped me.
It couldn't get Vuetify to work with just the "vue add vuetify" command, but following the steps there helped me and now it's working.

https://vuetifyjs.com/en/getting-started/quick-start

Hope this helps.

renetik · 2019-05-01T08:21:53Z

Why I cannot find type for VTextField anywhere ?

MartinBalerio · 2019-06-05T03:38:07Z

@rene-dohan have you tried

import VTextField from 'vuetify/es5/components/VTextField'

That fixed it for me.

renetik · 2019-06-05T08:39:50Z

@rene-dohan have you tried

import VTextField from 'vuetify/es5/components/VTextField'

That fixed it for me.

Well no, I wanted to access it from typescript as reference and could not find type definition.

jacekkarczmarczyk · 2019-06-05T08:41:53Z

vuetifyjs/vuetify#7387

adamsimonini · 2019-07-02T21:05:07Z

just an FYI everyone. after you do vue create "my app", and then add vuetify, please be sure to run a "npm install".

I had the error listed above: vuetify had modified the initial vue index page, but had no css applied. After running npm install, all the styles were there.

tblank555 · 2019-07-24T13:06:58Z

I just ran into the issue of TypeScript not finding a definition for whatever is exported from vuetify/lib after using vue-cli to set up a Vue app and then adding Vuetify.

Simply adding "vuetify" to the "types" field in my tsconfig fixed it as suggested here.

But it seems like this is something that should happen when installing Vuetify, right?

Here are my versions:
vue-clie 3.9.3,
vue-clie-plugin-vuetify 0.6.1,
vuetify 2.0.0

DRoet · 2019-10-17T12:49:59Z

closing this for now, feel free to re-open a new issue if you are still having problems

sethidden · 2019-10-30T15:09:49Z

ahh nvm I see what the problem is, this only happens when you select Typescript + TSlint.

I would suggest everyone that encounters this to use Typescript + ESlint, since @vue/cli officially deprecated the usage of TSlint and everyone is moving away towards https://github.com/typescript-eslint/typescript-eslint

Wanted to post a heads up and say that this error has happened to me with Typescript + ESLint under vue CLI 4. It's fixed by the manual tsconfig.json "types" fix posted above though.

Shuyinsama · 2019-10-31T07:58:24Z

Yeah this is definitely not fixed.

I just created a Vue typescript with ESLint project and did a vue add vuetify and still got this error.
I added "vuetify" to my types declaration in tsconfig.json that seemed to solve the message for "vuetify/lib" imports. But I am also import a locale from "vuetify/es5/locale/nl" and it gives me the same message

MisterGoodcat · 2019-10-31T10:33:42Z

This has nothing to do with which linter is being used. It's a compiler issue (tsc) where imports from "vuetify/lib" fail, which is what you do for manual imports in a-la-carte. Just follow the official documentation in a TypeScript setup and the build will immediately fail.

DRoet · 2019-10-31T11:24:00Z

yeah something like #104 would have to land to help with this

fabien-ml · 2019-11-17T19:09:00Z

Same problem here when using the default preset.
Adding vuetify to types in tsconfig.json solved it.

vue: 2.6.10
vuetify: 2.1.0
vue-cli-plugin-vuetify: 2.0.2
typescript: 3.5.3

Djaler · 2019-11-20T18:09:31Z

I found a way to workaround this bug in 'a-la-carte' setup. One need to change import from vuetify/lib to vuetify and then add this into webpack configuration:

module.exports = {
  //...
  resolve: {
    alias: {
      'vuetify$': 'vuetify/lib'
    }
  }
};

After this manipulations you don't need to explicitly specify types in tsconfig.json

vinerich · 2020-01-24T12:50:32Z

Just to let you know the same error still persist with a freshly created project.
Adding vuetify to types in tsconfig.json solved it for me.

nvitaterna · 2020-01-24T14:51:05Z

I created a shims-vuetify.d.ts file with the following line and typescript loads the typings without issue now:

import 'vuetify/types/lib.d';

devdnn · 2020-03-16T21:02:13Z

I created a shims-vuetify.d.ts file with the following line and typescript loads the typings without issue now:
import 'vuetify/types/lib.d';

Thanks @nvitaterna,

This is the only fixed the resolved my issue, can you please tell if is this a workaround or fix?

nvitaterna · 2020-03-17T15:49:34Z

IIRC, the "types" option in "compilerOptions" is exclusive - so you would have to add other typings to that as well (the Typescript docs are hard to navigate right now with the new layout and I can't really find documentation on this). I prefer using a declaration file so it doesn't interfere with anything else.

EDIT:
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types

If types is specified, only packages listed will be included.

vintprox · 2020-05-06T12:06:24Z

IIRC, the "types" option in "compilerOptions" is exclusive - so you would have to add other typings to that as well (the Typescript docs are hard to navigate right now with the new layout and I can't really find documentation on this). I prefer using a declaration file so it doesn't interfere with anything else.

EDIT:
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types

If types is specified, only packages listed will be included.

Oh, about that... Vue CLI somehow managed to litter in "types" with "webpack-env", so it is automatically exclusive to start with.

pniederlag · 2020-06-23T21:18:06Z

tough landing, coming back to vuejs after some time has passed and hitting some long-term issue right after an awesome introduction video. anything I can help to iron this out?

this is what fixed compile error for me:

Subject: [PATCH 1/1] bugfix:
 https://github.com/vuetifyjs/vuetify/issues/5944\#issuecomment-520027576

---
 src/plugins/vuetify.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index ab318b2..82bcb47 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import Vuetify from 'vuetify/lib';
+import Vuetify from 'vuetify';
 import de from 'vuetify/src/locale/de';
 
 Vue.use(Vuetify);
-- 
2.17.1

Writtscher · 2020-07-10T22:54:21Z

Can one of the devs please tell whether this will be fixed anytime soon? Because it is easy to get vuetify running with typescript but not having a la carte is a no go. So would be nice to know for our upcoming projects whether we can use typescript or not.

josefsabl · 2020-09-02T14:07:50Z

I had to put this into my vue-shims.d.ts file to let the ts errors go away. Maybe it helps someone.

declare module 'vuetify' {
    import Vuetify from 'vuetify/types';
    export default Vuetify;
}

bryan-gilbert · 2020-09-16T22:30:36Z

I created a shims-vuetify.d.ts file with the following line and typescript loads the typings without issue now:
import 'vuetify/types/lib.d';
Thanks @nvitaterna,

This is the only fixed the resolved my issue, can you please tell if is this a workaround or fix?

This worked for me too. Fresh Vue + Typescript project with vuetify added via vue add vuetify

KaelWD mentioned this issue Oct 26, 2018

Jest Unit Test SyntaxError: Unexpected token import vuetifyjs/vuetify#5395

Closed

amritk closed this as completed Dec 4, 2018

KaelWD mentioned this issue Dec 6, 2018

Vuetify does not respect TypeScript in the project #66

Closed

KaelWD reopened this Dec 20, 2018

KaelWD mentioned this issue Dec 20, 2018

[Bug Report] Could not find a declaration file for module 'vuetify/lib' vuetifyjs/vuetify#5944

Closed

KaelWD mentioned this issue Apr 20, 2019

Adding vuetify to cli project build error #89

Closed

jacekkarczmarczyk closed this as completed Jun 5, 2019

jacekkarczmarczyk reopened this Jun 5, 2019

LazyRichard mentioned this issue Sep 17, 2019

How to use vuetify in vue typescript? #112

Closed

DRoet closed this as completed Oct 17, 2019

njhyuk added a commit to njhyuk/daily-report-frontend that referenced this issue Oct 17, 2019

fix vuetify issue @see vuetifyjs/vue-cli-plugins#43

e4ee177

DRoet reopened this Oct 31, 2019

DRoet changed the title ~~Adding vuetify to cli project doesn't work out of the box~~ [Bug Report] Typescript 'vue add vuetify' creates non-functional project Nov 14, 2019

DRoet mentioned this issue Nov 14, 2019

[Bug Report] Typescript 'vue add vuetify' creates non-functional project #136

Closed

Jestfer added a commit to Jestfer/vue-test-project that referenced this issue Jun 14, 2020

Added vuetify types to tsconfig: vuetifyjs/vue-cli-plugins#43 (comment)

a8d649b

KaelWD mentioned this issue Dec 3, 2020

Error: [VuetifyLoaderPlugin Error] No matching rule for vue-loader found. vuetifyjs/vuetify-loader#161

Closed

KaelWD self-assigned this Dec 3, 2020

KaelWD added the bug Something isn't working label Dec 3, 2020

KaelWD closed this as completed in 3dac4f1 Dec 3, 2020

[Bug Report] Typescript 'vue add vuetify' creates non-functional project #43

[Bug Report] Typescript 'vue add vuetify' creates non-functional project #43

Comments

amritk commented Sep 28, 2018 • edited Loading

jappyjan commented Oct 9, 2018

KaelWD commented Oct 9, 2018

amritk commented Oct 9, 2018

amritk commented Oct 15, 2018

jappyjan commented Oct 15, 2018

amritk commented Oct 15, 2018

amritk commented Oct 17, 2018

amritk commented Oct 24, 2018 • edited Loading

KaelWD commented Oct 25, 2018

MisterGoodcat commented Nov 1, 2018

jappyjan commented Nov 2, 2018

praseodym commented Nov 4, 2018

MisterGoodcat commented Nov 4, 2018

amritk commented Nov 5, 2018

amritk commented Dec 4, 2018

KaelWD commented Dec 20, 2018

novanettor commented Feb 25, 2019

irfandyj commented Mar 2, 2019

GisellePerez commented Mar 18, 2019

renetik commented May 1, 2019

MartinBalerio commented Jun 5, 2019

renetik commented Jun 5, 2019

jacekkarczmarczyk commented Jun 5, 2019

adamsimonini commented Jul 2, 2019

tblank555 commented Jul 24, 2019

DRoet commented Oct 17, 2019

sethidden commented Oct 30, 2019 • edited Loading

Shuyinsama commented Oct 31, 2019

MisterGoodcat commented Oct 31, 2019

DRoet commented Oct 31, 2019

fabien-ml commented Nov 17, 2019

Djaler commented Nov 20, 2019 • edited Loading

vinerich commented Jan 24, 2020

nvitaterna commented Jan 24, 2020

devdnn commented Mar 16, 2020

nvitaterna commented Mar 17, 2020 • edited Loading

vintprox commented May 6, 2020

pniederlag commented Jun 23, 2020

Writtscher commented Jul 10, 2020

josefsabl commented Sep 2, 2020

bryan-gilbert commented Sep 16, 2020 • edited Loading

amritk commented Sep 28, 2018 •

edited

Loading

amritk commented Oct 24, 2018 •

edited

Loading

sethidden commented Oct 30, 2019 •

edited

Loading

Djaler commented Nov 20, 2019 •

edited

Loading

nvitaterna commented Mar 17, 2020 •

edited

Loading

bryan-gilbert commented Sep 16, 2020 •

edited

Loading