2022-08-17
2051
#typescript#vue
Preetish HS
12819
Aug 17, 2022 ⋅ 7 min read

How to use Vue 3 with TypeScript

Preetish HS Freelance web developer, digital nomad, and design enthusiast. You can find me online at preetish.in.

Recent posts:

Leveraging Wasp For Full-Stack Development

Leveraging Wasp for full-stack development

Learn how the Wasp, Web Application Specification, framework simplifies full-stack development by offloading repetitive code tasks.

Wisdom Ekpotu
May 27, 2024 ⋅ 11 min read
Developing Web Extensions With Wxt

Developing web extensions with the WXT library

Browser extensions are an important part of the web ecosystem. They make our lives easier and enhance our web browsing […]

Debjyoti Banerjee
May 24, 2024 ⋅ 8 min read
Bulma Css Adoption Guide: Overview, Examples, And Alternatives

Bulma CSS adoption guide: Overview, examples, and alternatives

Explore how Bulma CSS simplifies frontend development with its ease of use and customizable, responsive, pre-designed UI elements.

Timonwa Akintokun
May 23, 2024 ⋅ 10 min read
Using Mountaineer To Develop A React App With Python

Using Mountaineer to develop a React app with Python

Develop a React app with Python using the Mountaineer framework for building a simple app with integrated your frontend and backend database.

Rosario De Chiara
May 23, 2024 ⋅ 7 min read
View all posts

30 Replies to "How to use Vue 3 with TypeScript"

  1. Nice! Filling in the typescript gaps between vuex and vue components is very important. Is there a way of gracefully getting this to work with action and getters in the root store as well?

    const store = new Vuex.Store({
    actions: {}, // Can’t make use of decorators
    getters: {}, // Can’t make use of decorators
    modules: {
    User
    }
    })

  2. If you are using actions and getters in your root store, you will be able to access it directly like this

    “`
    import {
    Getter,
    Action,
    } from ‘vuex-class’

    @Component
    export class MyComp extends Vue {

    @Getter(‘foo’) getterFoo
    @Action(‘foo’) actionFoo

    created () {
    this.getterFoo
    this.actionFoo()

    }
    }
    “`

    https://github.com/ktsn/vuex-class

  3. Thank you for this article! I am new, and with this topic I find the offical docu not so good as its reputation would make me expect.

    However, I do get lost, when you import “Project” and later set it as a component as “project” (lowercase). That doesn’t work in my case. Shouldn’t the component be written in uppercase, too?

  4. And I get a ton off errors when defining the @Props:

    ERROR in /Volumes/_II_/_SITES/vue_chord_player/src/components/Keyboard.vue(15,43):
    15:43 Property ‘name’ has no initializer and is not definitely assigned in the constructor.
    13 | export default class Keyboard extends Vue {
    14 | @Prop() readonly msg!: string
    > 15 | @Prop({ default: ‘John Doe’ }) readonly name: string
    | ^

    This is weird, because I do follow your setup completely… what is wrong here?

  5. Hi, I applaud anybody who is spreading information about how to get typescript and vue working. Until Vue 3.0 comes out, it is not an easy thing to do. I have been working on my learning of it for the past 2 -3 months. My top two requirements were to use typescript (preferably classes) and unit testing.

    I early on came to the conclusion that the proper solution at this point in time is to use the composition API and not the options API or the class API for Vue components. The composition API is the way forward for typescript in Vue and we can start using it today with the composition api plugin. And it makes your code very easy to separate the logic from the presentation so both can easily be unit tested. I have been defining all my logic of a vue in a class that gets instantiated in the vue component’s setup function and the class’ variables are defined as Refs for reactivity. It works great and unit testing it is so easy. it also allows you to separate different parts of the component’s logic into different classes so those items can be unit tested independently.

    For global state, I tried vuex-module-decorators and gave up. They seem to work at first, but once you start trying to do error handling of actions, both in production code and unit tests, you start to get strange errors from the decorator code. There is an SO thread an issue on github about it. This issue was the thing that finally made me abandon vuex. It just isn’t architected well to work with a typed language like typescript and I don’t want to give up the type safety and tooling support of typescript by casting everything everywhere. So now that I don’t use vuex, I have started to create typescript classes that are singletons as my global state and I import these modules wherever I need them. It works perfectly and I get typesafety because they are just classes. And they are incredibly easy to unit test. I don’t have to do anything special.

    Now that i have done all that, Vue and typescript work really well together.

    My biggest recommendation would be to ditch vuex. I would say that 80% of my time learning vue was trying all the different approaches to typescript and vuex. It all felt like banging my head against the wall

  6. This is great! please keep this article alive for as long as possible. please note this is in my bookmarks as i refer to it every time i am stuck

  7. I can not thank you enough bro, the provided link(GitHub repo) has helped me a-lot to spot some of thinks that did not sink well while following your tutorial. Thanks man

  8. Hi first of all thanks for the nice article.

    Unfortunately I didn’t manage to run your example with Vuex. The action updateName doesn’t get triggered. I remmember when I tried Vuex for the first time with plain Javascript, I had no problems, but somehow I thing with typescript it makes things 100 times more difficult.

  9. I completely agree. I could do this with typescript so easily and now things got much worse in my opnion. Maybe I just have to get used to it.

  10. Can you share a repo for how it works without Vuex? The repos shared here are my only reference. Now newly thinking up a new way of doing things makes my brain explode^^

  11. I’m hitting issues now with this, when I use an action I’m getting:

    ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access this.someMutation() or this.someGetter inside an @Action?
    That works only in dynamic modules.
    If not dynamic use this.context.commit(“mutationName”, payload) and this.context.getters[“getterName”]

    In even the simplest examples like the above that are definitely using this.context.commit, anyone got any ideas?

  12. NOTE: Be careful, getters in vuex are not reactive. Loaded just once when the component is created.
    To access a data reactively, use this syntax
    syntax: this.$store.state.{CLASSNAME}.{MEMBER_OF_CLASS}
    example: this.$store.state.User.name
    to put in the component which you want access at the data.

  13. I use class components with decorators. Except for vuex and vuex modules I do not use decorators. Do not need them and all works fine, no errors.
    I understood that when application grows also vuex is needed in Vue 3, So I stay at Vue 2 with typescript for now.

    1. We try to stay abreast of new releases and update our content accordingly when there are breaking changes. We’ll keep this on our radar. Thanks!

Leave a Reply