How to use VueJS with Typescript?

Question

I'm trying to learn Vue and Typescript. But I can't seem to set it up correctly.

I made an app.ts file with these lines of code:

import { Vue } from "../libs/vue/vue";

var app = new Vue({
    el: "#app",
    data: {
        message: 'Hello Vue!'
    }
});

I thought this would compile to something like this:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

But instead I'm getting tons of errors when I run tsc. It seems as if it is trying to build the Vue definition files? Image here

How can I get started working on Vue then with typescript? Are there any tutorials that can help me with this? I found a few online but none seem to be helping, or they are using other libraries such as av-ts which gives me the same problem

tony19 · Accepted Answer · 2022-07-15 01:54:51Z

2

This is the official document.

https://v2.vuejs.org/v2/guide/typescript.html

Also, why are you importing Vue from "../libs/vue/vue"? That may be the cause of the problem. If you have installed Vue.js with npm install vue, you should write

import Vue = require('vue');

or

import * as Vue from 'vue';

edited Jul 15, 2022 at 1:54

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 31, 2016 at 9:23

kimamula

12.9k8 gold badges41 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2657943 Over a year ago

I tried what you said but it still gives me errors with the .d.ts files

user2657943 Over a year ago

Oh I found the problem. After checking the detailed MsBuild logs I saw VS was using Typescript 1.8. So after installing Typescript 2.1.4 it worked!

Collectives™ on Stack Overflow

How to use VueJS with Typescript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related