DEV Community

Discussion on: Nuxt.js v2.4.0 is out! TypeScript, Smart prefetching and more...

Collapse
 
renestalder profile image
René Stalder

I start to get confused about TypeScript support and how it should be used.

The very standard way of using TypeScript with Vue.js is by using Vue.extend, which allows you to use TypeScript without adding third-party libraries. That's the way I prefer for my team, as you can immediately apply everything from the JavaScript Vue.js documentation without the need to lookup how to solve it with decorators.
vuejs.org/v2/guide/typescript.html...

Then there is an example TypeScript template in the nuxt-community group on Github. It uses nuxt-property-decorator to use Vue and Nuxt with class style Vue.
github.com/nuxt-community/typescri...

Now, the example in your post is pointing to code using class style Vue with Nuxt and vue-property-decorator.
github.com/nuxt/nuxt.js/tree/dev/e...

Is there any good, up-to-date post about which is the recommended official way and why? Especially regarding the upcoming Vue.js 3.0, function style seems to be the most sustainable method in my understanding, as it will be transformed to classes on compile time. Also it gets PropType helper in Vue.js 2.6.

I expect more breaking changes with the usage of the third-party decorator libraries.

Collapse
 
kevinmarrec profile image
Kevin Marrec • Edited

Hey, sorry if the lack of documentation can bring confusion around Nuxt TypeScript Support. But it will be updated really soon, along TypeScript definitions for the configuration file.

About how it should be used : Nuxt TS support not only provides support around Vue SFC. It also provides .ts & .tsx support for Nuxt pages/layouts/components, nuxt.config.ts support but overall it provides TS runtime support, which means you can use TypeScript for modules/serverMiddleware as well, or may I say, everywhere in your Nuxt project.

The Nuxt typescript minimal example is using Class decorators through vue-property-decorator cause IMO decorators showcases better the TypeSript's power by using classes.

You're free to use either Vue.extend or vue-property-decorator with TypeScript classes. We don't ship vue-property-decorator in Nuxt, it's an external dependency you can chose to either use or not.

FYI, you can find the different behaviors of using TypeScript around Nuxt in our own test fixtures : github.com/nuxt/nuxt.js/tree/dev/t...

Then, about vue-property-decorator VS nuxt-property-decorator, there will be a section in documentation but here is my thoughts about it :

nuxt-property-decorator registers hooks which make you able to use Nuxt (asyncData for example) things directly in the class, but doesn't provide either autompletion or typechecking right here. Further more, it's also easier to not having to maintain a library on top of the other one :).

Finally, when Vue.js 3.0 will land, not only TypeScript support will/can be impacted around Nuxt, that's why we'll be surely releasing a major version of Nuxt when migrating to Vue.js 3.