6

I started using Typescript and trying to apply it to my project. However, I can't get Vue.js plugins like vue-resource to work with it.

When I use

this.$http.post()

I get the error:

error TS2339: Property '$http' does not exist on type 'typeof Vue'.

which makes sense because I am in a class context. But how can I do that? This is my full component:

<template>
<div>
  <h1>Sign up</h1>

  <form>
    <div class="form-group">
      <label for="name">Name</label>
      <input v-model="name" type="text" class="form-control" name="name" placeholder="Name">
      <small class="form-text text-muted">Please provide a name.</small>
    </div>
    <div class="form-group">
      <label for="name">Password</label>
      <input v-model="password" type="password" class="form-control" name="password" placeholder="Password">
      <small class="form-text text-muted">Please provide a password.</small>
    </div>
    <input type="submit" class="btn btn-primary" value="Submit" @click.prevent="save">
  </form>
</div>
</template>

<script lang="ts">
import Component from 'vue-class-component'

@Component
export default class SignUp extends Vue {
  name: string = ''
  password: string = ''

  save(): void {
    this.$http.post('/api/sign-up', {
        name: this.name,
        password: this.password
      })
      .then((response: any) => {
        console.log(response)
      })
  }
}
</script>

And I register vue-resource in my main.ts like this:

import Vue from "vue"
import router from "./router"
import App from "./app"

const VueResource = require('vue-resource')

Vue.use(VueResource)

new Vue({
  el: "#app",
  router,
  template: "<App/>",
  components: { App },
});
2
  • 1
    What happens if you import VueResource using the import statement and not require? I don't use typescript, but $http is undefined, in js, when using require; import works fine. Commented Jun 18, 2017 at 19:24
  • Yes! That did it! Thank you so much. I had to require it because of some older errors but now it seems to work. You may convert your comment into an answer. Have a nice day. Commented Jun 18, 2017 at 19:32

1 Answer 1

5

Use import instead of require for VueResource too.

import VueResource from 'vue-resource'
Sign up to request clarification or add additional context in comments.

2 Comments

node_modules/vue-resource/t...' is not assignable to type 'PluginFunction<any>'. and node_modules/vue-resource/t...' provides no match for the signature '(Vue: VueConstructor<Vue>, options?: any): void'.[39m
i am also getting this issue : Argument of type 'Promise<{ default: typeof "D:/Workshop/nodejs/ef-web-components/node_modules/vue-resource/types/i ...' is not assignable to parameter of type 'PluginObject<any> | PluginFunction<any>'. Type 'Promise<{ default: typeof ' is not assig nable to type 'PluginFunction<any>'. Type 'Promise<{ default: typeof ' provides n o match for the signature '(Vue: VueConstructor<Vue>, options?: any): void'

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.