Vuetify does not respect TypeScript in the project

[andreixk]

When adding vuetify using vue add vuetify, the components are added in standards ES6 format regardless of the language used by the project. I create a new project (with vue create) to use TypeScript.
As a result, vuetify components do not get linted with yarn lint and throw errors on build.

[jacekkarczmarczyk]

Please provide exact reproduction steps

[andreixk]

1. vue create testproject
2. select the following:

? Check the features needed for your project:
 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
❯◯ E2E Testing

then select defaults for everything else, but ensure linter is TSLint

3. cd testproj

4. vue add vuetify - pick default

5. yarn serve

now you will see a lot of warnings and possibly an error. basically the helloworld.vue and app.vue (that vuetify replaced) are created using es6, not the TS syntax. even the <script> tag does not have lang="ts" attribute.

yarn run v1.12.3
$ vue-cli-service lint
Fixed 1 error(s) in /private/var/www/html/apps/testproj/src/main.ts
Fixed 4 error(s) in /private/var/www/html/apps/testproj/src/plugins/vuetify.ts

✨  Done in 1.97s.
mb:testproj t0rus$ yarn serve
yarn run v1.12.3
$ vue-cli-service serve
 INFO  Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
 98% after emitting CopyPlugin

 DONE  Compiled successfully in 10712ms                                                                                          6:20:18 a.m.

WARNING in /private/var/www/html/apps/testproj/src/App.vue
25:49 Missing semicolon
    23 |
    24 | <script>
  > 25 | import HelloWorld from './components/HelloWorld'
       |                                                 ^
    26 |
    27 | export default {
    28 |   name: 'App',
WARNING in /private/var/www/html/apps/testproj/src/App.vue
30:15 Missing trailing comma
    28 |   name: 'App',
    29 |   components: {
  > 30 |     HelloWorld
       |               ^
    31 |   },
    32 |   data () {
    33 |     return {
WARNING in /private/var/www/html/apps/testproj/src/App.vue
32:7 Spaces before function parens are disallowed
    30 |     HelloWorld
    31 |   },
  > 32 |   data () {
       |       ^
    33 |     return {
    34 |       //
    35 |     }
WARNING in /private/var/www/html/apps/testproj/src/App.vue
35:6 Missing semicolon
    33 |     return {
    34 |       //
  > 35 |     }
       |      ^
    36 |   }
    37 | }
    38 | </script>
WARNING in /private/var/www/html/apps/testproj/src/App.vue
36:4 Missing trailing comma
    34 |       //
    35 |     }
  > 36 |   }
       |    ^
    37 | }
    38 | </script>
    39 |
WARNING in /private/var/www/html/apps/testproj/src/App.vue
37:2 Missing semicolon
    35 |     }
    36 |   }
  > 37 | }
       |  ^
    38 | </script>
    39 |
WARNING in /private/var/www/html/apps/testproj/src/components/HelloWorld.vue
93:60 Missing trailing comma
    91 |         {
    92 |           text: 'vuetify-loader',
  > 93 |           href: 'https://github.com/vuetifyjs/vuetify-loader'
       |                                                            ^
    94 |         },
    95 |         {
    96 |           text: 'github',
WARNING in /private/var/www/html/apps/testproj/src/components/HelloWorld.vue
97:53 Missing trailing comma
     95 |         {
     96 |           text: 'github',
  >  97 |           href: 'https://github.com/vuetifyjs/vuetify'
        |                                                     ^
     98 |         },
     99 |         {
    100 |           text: 'awesome-vuetify',
WARNING in /private/var/www/html/apps/testproj/src/components/HelloWorld.vue
101:61 Missing trailing comma
     99 |         {
    100 |           text: 'awesome-vuetify',
  > 101 |           href: 'https://github.com/vuetifyjs/awesome-vuetify'
        |                                                             ^
    102 |         }
    103 |       ],
    104 |       importantLinks: [
WARNING in /private/var/www/html/apps/testproj/src/components/HelloWorld.vue
102:8 Missing trailing comma
    100 |           text: 'awesome-vuetify',
    101 |           href: 'https://github.com/vuetifyjs/awesome-vuetify'
  > 102 |         }
        |        ^
    103 |       ],
    104 |       importantLinks: [
    105 |         {
WARNING in /private/var/www/html/apps/testproj/src/components/HelloWorld.vue
107:38 Missing trailing comma
    105 |         {
    106 |           text: 'Documentation',
  > 107 |           href: 'https://vuetifyjs.com'
        |                                      ^
    108 |         },
    109 |         {
    110 |           text: 'Chat',
WARNING in /private/var/www/html/apps/testproj/src/components/HelloWorld.vue
111:48 Missing trailing comma
    109 |         {
    110 |           text: 'Chat',
  > 111 |           href: 'https://community.vuetifyjs.com'
        |                                                ^
    112 |         },
    113 |         {
    114 |           text: 'Made with Vuetify',
WARNING in /private/var/www/html/apps/testproj/src/components/HelloWorld.vue
115:46 Missing trailing comma
    113 |         {
    114 |           text: 'Made with Vuetify',
  > 115 |           href: 'https://madewithvuetifyjs.com'
        |                                              ^
    116 |         },
    117 |         {
    118 |           text: 'Twitter',
WARNING in /private/var/www/html/apps/testproj/src/components/HelloWorld.vue
119:46 Missing trailing comma
    117 |         {
    118 |           text: 'Twitter',
  > 119 |           href: 'https://twitter.com/vuetifyjs'
        |                                              ^
    120 |         },
    121 |         {
    122 |           text: 'Articles',
WARNING in /private/var/www/html/apps/testproj/src/components/HelloWorld.vue
123:43 Missing trailing comma
    121 |         {
    122 |           text: 'Articles',
  > 123 |           href: 'https://medium.com/vuetify'
        |                                           ^
    124 |         }
    125 |       ],
    126 |       whatsNext: [
WARNING in /private/var/www/html/apps/testproj/src/components/HelloWorld.vue
124:8 Missing trailing comma
    122 |           text: 'Articles',
    123 |           href: 'https://medium.com/vuetify'
  > 124 |         }
        |        ^
    125 |       ],
    126 |       whatsNext: [
    127 |         {
WARNING in /private/var/www/html/apps/testproj/src/components/HelloWorld.vue
129:62 Missing trailing comma
    127 |         {
    128 |           text: 'Explore components',
  > 129 |           href: 'https://vuetifyjs.com/components/api-explorer'
        |                                                              ^
    130 |         },
    131 |         {
    132 |           text: 'Select a layout',
WARNING in /private/var/www/html/apps/testproj/src/components/HelloWorld.vue
133:57 Missing trailing comma
    131 |         {
    132 |           text: 'Select a layout',
  > 133 |           href: 'https://vuetifyjs.com/layout/pre-defined'
        |                                                         ^
    134 |         },
    135 |         {
    136 |           text: 'Frequently Asked Questions',
WARNING in /private/var/www/html/apps/testproj/src/components/HelloWorld.vue
137:81 Missing trailing comma
    135 |         {
    136 |           text: 'Frequently Asked Questions',
  > 137 |           href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions'
        |                                                                                 ^
    138 |         }
    139 |
    140 |       ]
WARNING in /private/var/www/html/apps/testproj/src/components/HelloWorld.vue
138:8 Missing trailing comma
    136 |           text: 'Frequently Asked Questions',
    137 |           href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions'
  > 138 |         }
        |        ^
    139 |
    140 |       ]
    141 |     })
WARNING in /private/var/www/html/apps/testproj/src/components/HelloWorld.vue
140:6 Missing trailing comma
    138 |         }
    139 |
  > 140 |       ]
        |      ^
    141 |     })
    142 |   }
    143 | </script>
WARNING in /private/var/www/html/apps/testproj/src/components/HelloWorld.vue
141:5 Missing trailing comma
    139 |
    140 |       ]
  > 141 |     })
        |     ^
    142 |   }
    143 | </script>
    144 |
WARNING in /private/var/www/html/apps/testproj/src/components/HelloWorld.vue
142:2 Missing semicolon
    140 |       ]
    141 |     })
  > 142 |   }
        |  ^
    143 | </script>
    144 |
    145 | <style>
ERROR in /private/var/www/html/apps/testproj/src/plugins/vuetify.ts
2:21 Could not find a declaration file for module 'vuetify/lib'. '/private/var/www/html/apps/testproj/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 | import 'vuetify/src/stylus/app.styl';
    4 |
    5 | Vue.use(Vuetify, {
Version: typescript 3.2.1, tslint 5.11.0
Time: 2299ms

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

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

[KaelWD]

Duplicate of #43

even the <script> tag does not have lang="ts"

vue-cli does not provide a way for us to do this easily. You have to write typescript yourself if you want it.

[andreixk]

then the vuetify plugin should not replace helloworld.vue and app.vue at all if they're using TS.

also, that ticket is closed as "solved" while the issue persists with the latest version

[jacekkarczmarczyk]

I think we should be able to add lang="ts" in templates. However the only error/warning related to TS is that Could not find a declaration file for module 'vuetify/lib' and it would be there regardless of having lang="ts" or not, others are just linting warnings that should be fixed automatically

[awill2]

+1