tauri-apps/vue-cli-plugin-tauri

Http TS definitions don't match (documentation and actual definitions)

Closed this issue · 8 comments

Describe the bug
TS definitions don't match

import http from 'tauri/api/http'

image

https://tauri.studio/en/docs/api/js#functions-4

The get state that options are optional.

To Reproduce
Steps to reproduce the behavior:

  1. vue create some-app (choose vue 3 and typescript)
  2. vue add tauri
  3. Add component:
<template>
  <button @click="getData">Get some data</button>
</template>

<script lang="ts">
import { defineComponent, watchEffect } from 'vue'
import http from 'tauri/api/http'

const App = defineComponent({
  setup() {
    return {
      getData: async function () {
        try {
          await http.get<string>('https://mock.codes/200')
        } catch (e) {
          console.error(e)
        }
      }
    }
  }
})

export default App
</script>

Expected behavior
Should do an API call.

Screenshots
See IDE error above!

Platform and Versions (please complete the following information):


Operating System - Darwin(20.3.0) - darwin/arm64

Node.js environment
  Node.js - 15.14.0
  tauri.js - 0.14.1

Rust environment
  rustc - 1.51.0
  cargo - 1.51.0
  tauri-bundler - 0.9.4

Global packages
  NPM - 7.7.6
  yarn - 1.22.10

App directory structure
/.git
/.idea
/node_modules
/public
/src
/src-tauri

App
  tauri.rs - 0.11.1
  mode - embedded-server
  build-type - bundle
  CSP - default-src blob: data: filesystem: ws: http: https: 'unsafe-eval' 'unsafe-inline'
  distDir - unset
  devPath - unset

Seems like you are using an old version of the api.
Try installing @tauri-apps/api package.

You are also using the alpha version of tauri.

Beta is out, follow the get-started guide on https://tauri.studio

@amrbashir

Im using https://github.com/tauri-apps/vue-cli-plugin-tauri, so I guess the plugin needs @tauri-apps/api ?

Sorry about that, the plugin still needs to be updated. for now you can just create a Vue-Cli project then follow this guide to integrate Tauri (@tauri-apps/api will be automatically added).

The Vue CLI plugin is now updated to use the tauri beta-rc, so this issue should be resolved.

@nklayman @amrbashir

import { http } from "@tauri-apps/api/dist/bundle";

...

await http.get<string>('https://mock.codes/200');

image

Property 'get' does not exist on type 'typeof import("/Users/youri/code/vue-sabnzbd/node_modules/@tauri-apps/api/dist/http")'.

Edit:

Change it to:

import { http } from "@tauri-apps/api/dist/bundle";

...

const client = await http.getClient();

await client.get<string>('https://mock.codes/200');

I'm getting:

* @tauri-apps/api/dist/bundle in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=ts

To install it, you can run: npm install --save @tauri-apps/api/dist/bundle

I installed @tauri-apps/api to my dependencies

You should import from just @tauri-apps/api:

import { http } from "@tauri-apps/api";
http.fetch("http://google.com", { responseType: 2 }).then(console.log);

You should import from just @tauri-apps/api:

import { http } from "@tauri-apps/api";
http.fetch("http://google.com", { responseType: 2 }).then(console.log);

This is the current fix but the next @tauri-apps/api release will fix the import issues.