README
¶
vue
Package vue is the progressive framework for WebAssembly applications.
Install
GOARCH=wasm GOOS=js go get github.com/norunners/vue
Requires Go 1.12 or higher.
Goals
- 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.
Hello World!
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.
Serve Examples
Install wasmgo to serve examples.
go get -u github.com/dave/wasmgo
Serve an example locally.
cd examples/01-declarative-rendering
wasmgo serve
Status
Alpha - 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.
F.A.Q.
Why Vue?
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.
License
Documentation
¶
Overview ¶
Package vue is the progressive framework for wasm applications.
Package vue is the progressive framework for wasm applications.
Index ¶
- type Comp
- type Context
- type Option
- func Computed(name string, function interface{}) Option
- func Computeds(functions ...interface{}) Option
- func Data(data interface{}) Option
- func El(el string) Option
- func Method(name string, function interface{}) Option
- func Methods(functions ...interface{}) Option
- func Props(props ...string) Option
- func Sub(element string, sub *Comp) Option
- func Template(tmpl string) Option
- func Watch(field string, function interface{}) Option
- type ViewModel
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
This section is empty.
Types ¶
type Context ¶
type Context interface {
Data() interface{}
Get(field string) interface{}
Set(field string, value interface{})
Go(method string, args ...interface{})
Emit(event string, args ...interface{})
}
Context is received by functions to interact with the component.
type Option ¶
type Option func(*Comp)
Option uses the option pattern for components.
func Computed ¶
Computed is the computed option for components. The given name and function is registered as a computed property for the component. The function is required to accept context and return a value. For example: func(vctx vue.Context) Type
func Computeds ¶
func Computeds(functions ...interface{}) Option
Computeds is the computeds option for components. The given functions are registered as computed properties for the component. The functions are required to accept context and return a value. For example: func(vctx vue.Context) Type
func Data ¶
func Data(data interface{}) Option
Data is the data option for components. This option accepts either a function or a struct. The data function is expected to return a new data value. For example: func() *Type { return &Type{...} } Without a function the data is shared across components. The scope of the data is within the component. Data must be a pointer to be mutable by methods.
func El ¶
El is the element option for components. The root element of a component is query selected from the value, e.g. #app or body.
func Method ¶
Method is the method option for components. The given name and function is registered as a method for the component. The function is required to accept context and allows optional arguments. For example: func(vctx vue.Context) or func(vctx vue.Context, a1 Arg1, ..., ak ArgK)
func Methods ¶
func Methods(functions ...interface{}) Option
Methods is the methods option for components. The given functions are registered as methods for the component. The functions are required to accept context and allows optional arguments. For example: func(vctx vue.Context) or func(vctx vue.Context, a1 Arg1, ..., ak ArgK)
func Template ¶
Template is the template option for components. The template uses the mustache syntax for rendering. The template must have a single root element.
func Watch ¶
Watch is the watch option for components. The given function is registered as a watcher for the data field. All data fields are watchable, e.g. data, props and computed. The function is required to accept context and both the new and old values. For example: func(vctx vue.Context, newVal, oldVal Type)
type ViewModel ¶
type ViewModel struct {
// contains filtered or unexported fields
}
ViewModel is a vue view model, e.g. VM.
func (*ViewModel) Data ¶
func (vm *ViewModel) Data() interface{}
Data returns the data for the component. Props and computed are excluded from data.
func (*ViewModel) Get ¶
Get returns the data field value. Props and computed are included to get. Computed may be calculated as needed.
Source Files
Directories