58 errors when building with latest TypeScript and proposed config

[lillem4n]

Version

3.0.5

Reproduction link

https://github.com/lillem4n/vue3typescript

Steps to reproduce

1. Clone repo: git clone https://github.com/lillem4n/vue3typescript.git
2. cd vue3typescript
3. npm ci
4. npx tsc ./index.ts

What is expected?

TypeScript should process index.ts without problem.

What is actually happening?

58 errors are reported from libraries.

[LinusBorg]

1. add include: ['index.ts'] to tsconfig
2. Run npx tsc without any filename

Running tsc index.ts doesn't respect the config, for whatever reason (someone might know, I don't - never use it that way). TS docs say this command version uses "compiler defaults" which likely means it doesn't pick up tsconfig.json?

Sidenote: your index.ts doesn't contain proper code.

1. Vue no longer has a default export.
2. you should use defineComponent() to define components as shown in the docs.

[lillem4n]

Thanks a lot for the reply and fix for tsc!

For the sidenote:

1. That should probably be reflected in the official Vue docs then, my example was taken directly from those docs.
2. I deeply hope this will not be a requirement going forward, that is a huge step backwards from the vue beauty of just being a simple js object.

[lillem4n]

Thanks a lot for the reply and fix for tsc!

For the sidenote:

1. That should probably be reflected in the official Vue docs then, my example was taken directly from those docs.

2. I deeply hope this will not be a requirement going forward, that is a huge step backwards from the vue beauty of just being a simple js object.

Correction: All code except the import is taken from the docs. The docs actually does not say how to import with ESM.

[skirtles-code]

Correction: All code except the import is taken from the docs. The docs actually does not say how to import with ESM.

There is ongoing work to make this more visible in the guides but it is documented in the API Reference (at the top of the page):

https://v3.vuejs.org/api/global-api.html

For users coming from Vue 2, it is explained in the migration guide:

https://v3.vuejs.org/guide/migration/global-api.html#a-new-global-api-createapp

I suspect a lot of users pick it up from either Vue CLI or familiarity with this import pattern from other libraries.

There are other examples where ES module usage is shown but it does need greater prominence somewhere near the start of the guide. That should be coming as part of the issue I linked above.

[LinusBorg]

All code except the import is taken from the docs. The docs actually does not say how to import with ESM.

You seem to have missed this:

https://v3.vuejs.org/guide/typescript-support.html#defining-vue-components

I deeply hope this will not be a requirement going forward, that is a huge step backwards from the vue beauty of just being a simple js object.

In JS, you can use simple objects. To get type inference in Typescript, you need to tell TS that this random object actually represents a component, so this is necessary.

It was also already necessary in Vue 2, where you use Vue.extend() for the same reason:

https://vuejs.org/v2/guide/typescript.html#Basic-Usage

Single File Components (*.vue files) are different in that tools like Vetur can safely assume that the object in the default export is representing a .vue component - but in .ts files you always needed to tell TS what is a Vue component, and what isn't.

I'll close this issue as there is no bug in Vue 3 core and docs improvements are already tracked.