With Wasm (Rust)
22 | 23 | 24 | + 25 | 26 | = 27 | {res.value} 28 | 29 | ); 30 | }, 31 | }); 32 | -------------------------------------------------------------------------------- /src-wasm/src/lib.rs: -------------------------------------------------------------------------------- 1 | use wasm_bindgen::prelude::*; 2 | 3 | // Import the `window.alert` function from the Web. 4 | #[wasm_bindgen] 5 | extern "C" { 6 | fn alert(s: &str); 7 | } 8 | 9 | // Export a `greet` function from Rust to JavaScript, that alerts a hello message. 10 | #[wasm_bindgen] 11 | pub fn greet(name: &str) { 12 | alert(&format!("Hi, {}!!!", name)); 13 | } 14 | 15 | #[wasm_bindgen] 16 | pub fn add(nb1: f32, nb2: f32) -> f32 { 17 | nb1 + nb2 18 | } 19 | 20 | // lifted from the `console_log` example 21 | #[wasm_bindgen] 22 | extern "C" { 23 | #[wasm_bindgen(js_namespace = console)] 24 | fn log(s: &str); 25 | } 26 | 27 | #[wasm_bindgen(start)] 28 | pub fn run() { 29 | log("Hello from Rust WASM!"); // should output "Hello from Rust WASM!" 30 | } 31 | -------------------------------------------------------------------------------- /src-tauri/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "app" 3 | version = "0.1.11" 4 | description = "A Tauri App" 5 | authors = ["thomas@castelly.fr"] 6 | license = "" 7 | repository = "" 8 | default-run = "app" 9 | edition = "2021" 10 | build = "src/build.rs" 11 | 12 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 13 | 14 | [build-dependencies] 15 | tauri-build = { version = "1", features = [] } 16 | 17 | [dependencies] 18 | serde_json = "1" 19 | serde = { version = "1", features = ["derive"] } 20 | tauri = { version = "1", features = ["api-all"] } 21 | 22 | [features] 23 | default = [ "custom-protocol" ] 24 | custom-protocol = [ "tauri/custom-protocol" ] 25 | 26 | # enable debug 27 | # [profile.release.package.wry] 28 | # debug = true 29 | # debug-assertions = true 30 | # ./node_modules/.bin/tauri build --debug 31 | # ./src-tauri/target/debug/bundle/appimage/vite-vue_0.1.1_amd64.AppImage 32 | -------------------------------------------------------------------------------- /src/definitions/shims-app.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.bmp' { 2 | const src: string; 3 | export default src; 4 | } 5 | 6 | declare module '*.gif' { 7 | const src: string; 8 | export default src; 9 | } 10 | 11 | declare module '*.jpg' { 12 | const src: string; 13 | export default src; 14 | } 15 | 16 | declare module '*.jpeg' { 17 | const src: string; 18 | export default src; 19 | } 20 | 21 | declare module '*.png' { 22 | const src: string; 23 | export default src; 24 | } 25 | 26 | declare module '*.webp' { 27 | const src: string; 28 | export default src; 29 | } 30 | 31 | declare module '*.module.css' { 32 | const classes: { readonly [key: string]: string }; 33 | export default classes; 34 | } 35 | 36 | declare module '*.module.scss' { 37 | const classes: { readonly [key: string]: string }; 38 | export default classes; 39 | } 40 | 41 | declare module '*.module.sass' { 42 | const classes: { readonly [key: string]: string }; 43 | export default classes; 44 | } 45 | -------------------------------------------------------------------------------- /src-go/main.go: -------------------------------------------------------------------------------- 1 | package main 2 | 3 | import ( 4 | "C" 5 | "sort" 6 | "time" 7 | ) 8 | import "fmt" 9 | 10 | //export Concat 11 | func Concat(name string) *C.char { 12 | str := name + " ʕ ◔ϖ◔ʔ" 13 | 14 | return C.CString(str) 15 | } 16 | 17 | //export Timestamp 18 | func Timestamp() int64 { 19 | return time.Now().UnixNano() 20 | } 21 | 22 | //export Add 23 | func Add(nb1 int64, nb2 int64) int64 { 24 | return nb1 + nb2 25 | } 26 | 27 | //export Divide 28 | func Divide(nb1 float64, nb2 float64) float64 { 29 | return nb1 / nb2 30 | } 31 | 32 | //export Sort 33 | func Sort(vals []int32) []int32 { 34 | // len of slice is wrong 35 | sort.Slice(vals[:cap(vals)], func(i, j int) bool { 36 | return vals[i] < vals[j] 37 | }) 38 | 39 | return vals 40 | } 41 | 42 | //export MutateStr 43 | func MutateStr(str *string) { 44 | *str = "updated" 45 | } 46 | 47 | //export MutateInt 48 | func MutateInt(nb *int32) { 49 | *nb = 42 50 | } 51 | 52 | //export IsCorrect 53 | func IsCorrect() bool { 54 | return true 55 | } 56 | 57 | func main() { 58 | // try Mutate 59 | str := "hey" 60 | MutateStr(&str) 61 | fmt.Println(str) 62 | } 63 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | es6: true, 5 | }, 6 | extends: [ 7 | 'plugin:vue/vue3-essential', 8 | '@vue/eslint-config-airbnb-with-typescript', 9 | ], 10 | parserOptions: { 11 | ecmaVersion: 2020, 12 | parser: '@typescript-eslint/parser', 13 | }, 14 | parser: 'vue-eslint-parser', 15 | rules: { 16 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 17 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 18 | 'no-underscore-dangle': 'off', 19 | 'func-names': 0, 20 | 21 | // let ts manage modules 22 | 'import/no-extraneous-dependencies': 0, 23 | 24 | // will be resolved by TS 25 | 'import/no-unresolved': 0, 26 | 27 | // fix export/import default 28 | 'import/no-named-as-default': 0, 29 | 30 | '@typescript-eslint/ban-ts-comment': 'off', 31 | '@typescript-eslint/no-explicit-any': 0, 32 | '@typescript-eslint/explicit-module-boundary-types': 0, 33 | '@typescript-eslint/no-unused-vars': ['error'], 34 | 35 | // fix tsx component 36 | 'import/prefer-default-export': 0, 37 | }, 38 | }; 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tauri Application 2 | 3 | In this project I try to show how to use Tauri application with multiple technologies as: 4 | - VueJS with TypesScript 5 | - Wasm (Rust) 6 | - Vite for the client bundle 7 | - Go and Rust as backend thanks to ffi 8 | 9 | ## Launch dev 10 | 11 | - Install `rsw` 12 | > cargo install rsw 13 | - Install [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/) 14 | 15 | ⚠️ Note: Open two terminal windows, execute `npm run watch` in the first and `npm run tauri:dev` in the second. **The order of execution is important, do not close the first window!** 16 | 17 | ## Update Dependencies 18 | 19 | - Javascript part: 20 | - package.json > "@tauri-apps/api" 21 | - Rust part: 22 | > cd src-tauri 23 | 24 | > cargo update -p tauri 25 | - and check 26 | - https://crates.io/crates/tauri/versions 27 | - https://crates.io/crates/tauri-build/versions 28 | 29 | ## Release build 30 | 31 | ### Github Actions 32 | Take a look to: 33 | https://github.com/tcastelly/vue-tauri-vite/blob/master/.github/workflows/release.yml 34 | 35 | ### Manual release 36 | Increase version of 37 | 38 | > package.json > version 39 | 40 | > src-tauri/Cargo.toml > version 41 | 42 | > src-tauri/tauri.conf.json > version 43 | 44 | > npm run tauri:build 45 | -------------------------------------------------------------------------------- /src/definitions/getContextValues.d.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | ExtractDefaultPropTypes, 3 | ExtractPropTypes, 4 | Ref, 5 | SetupContext, 6 | } from 'vue'; 7 | 8 | type Unwrap
3 |
7 | Backend answer: {{ res }}
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | {{ msg }}
3 | 4 |
5 | Recommended IDE setup:
6 |
11 | VSCode
12 |
13 | +
14 |
19 | Vetur
20 |
21 | or
22 |
27 | Volar
28 |
29 | (if using
30 | <script setup>)
31 |
See README.md for more information.
36 | 41 | Vite Docs 42 | 43 | | 44 | 49 | Vue 3 Docs 50 | 51 |
52 | 53 | 54 |
55 | Edit
56 | components/HelloWorld.vue to test hot module replacement.
57 |