Package vue is the progressive framework for WebAssembly applications.
GOARCH=wasm GOOS=js go get github.com/norunners/vueRequires Go 1.12 or higher.
- Provide a unified solution for a framework, state manager and router in the frontend space.
- Leverage templating to separate application logic from frontend rendering.
- Simplify data binding to ease the relation of state management to rendering.
- Encourage component reuse to promote development productivity.
- Follow an idiomatic Go translation of the familiar Vue API.
The main.go file is compiled to a .wasm WebAssembly file.
package main
import "github.com/norunners/vue"
type Data struct {
Message string
}
func main() {
vue.New(
vue.El("#app"),
vue.Template("<p>{{ Message }}</p>"),
vue.Data(Data{Message: "Hello WebAssembly!"}),
)
select {}
}The index.wasmgo.html file fetches and runs a .wasm WebAssembly file.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="{{ .Script }}"></script>
</head>
<body>
<div id="app"></div>
<script src="{{ .Loader }}"></script>
</body>
</html>Note, the example above is compatible with wasmgo.
Install wasmgo to serve examples.
go get -u github.com/dave/wasmgoServe an example locally.
cd examples/01-declarative-rendering
wasmgo serveAlpha - The state of this project is experimental until the common features of Vue are implemented. The plan is to follow the Vue API closely except for areas of major simplification, which may lead to a subset of the Vue API. During this stage, the API is expected to encounter minor breaking changes but increase in stability as the project progresses.
One of the common themes of existing frameworks is to combine component application logic with frontend rendering. This can lead to a confusing mental model to reason about because both concerns may be mixed together in the same logic. By design, Vue renders components with templates which ensures application logic is developed separately from frontend rending.
Another commonality of existing frameworks is to unnecessarily expose the relation of state management to rendering in the API. By design, Vue binds data in both directions which ensures automatic updating and rendering when state changes.
This project aims to combine the simplicity of Vue with the power of Go WebAssembly.