Easy way to write golang in vue.
Just write golang in vue compoment with wasm tag.
First, we should install golang in our system. Please download and untar it into /usr/local/
directory.
You can also install in windows WSL(Windows Subsystem for Linux)
Second, link go program into system bin path or set /usr/local/go/bin
into PATH envirement variable.
# link go program into system bin path
ln -sf /usr/local/go/ /usr/bin/go
# set `/usr/local/go/bin` into PATH envirement variable
export PATH=$PATH:/usr/local/go/bin
You can also follow this guide.
Third, install vue-go-wasm-loader
npm install vue-go-wasm-loader
Add this loader into vue's sub loader.
webpack.base.conf.js:
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
wasm: 'vue-go-wasm-loader'
}
},
If your project is create from vue-cli, please edit vue-loader.conf.js
.
vue-loader.conf.js:
loaders: { ... utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}) ,
wasm: 'vue-go-wasm-loader'
},
This is an minilize vue wasm example
<template>
<div></div>
</template>
<script>
export default {
name: 'WASM'
}
</script>
<wasm lang="go">
package main
func main() {
println("Hello World!")
}
</wasm>
This example show how to bind a golang func into a vue compoment, and make sure display the button after the wasm is loaded.
<template>
<div v-if="WASMReady">
<input type="button" v-on:click="CustomFunc()" value="Press"/>
</div>
</template>
<script>
export default {
name: 'WASM',
mounted () {
this.$options.wasm.then(e => {
/* global ExportFunction */
ExportFunction.apply(this)
this.WASMReady = true
})
},
data () {
return {
WASMReady: false
}
}
}
</script>
<wasm lang="go">
package main
import "syscall/js"
func ExportFunction(this js.Value, args []js.Value) interface{} {
cb:=js.FuncOf(CustomFunc) // Your go func here
this.Set("CustomFunc",cb) // Your js compoments function name here
return nil
}
func CustomFunc(this js.Value, args []js.Value) interface{} {
println("CustomFunc called")
return nil
}
func main() {
c := make(chan struct{}, 0)
cb := js.FuncOf(ExportFunction)
js.Global().Set("ExportFunction", cb)
println("Web Assembly loadded!")
<-c
cb.Release()
}
</wasm>
MIT