Intro

hvue is a GopherJS and wasm wrapper for the Vue Javascript framework.

This (the "master" branch) is the go/wasm + GopherJS version. It uses gopherwasm to provide a compatability layer between go/wasm and GopherJS. go/wasm is patterned on GopherJS, but doesn't have all of its capabilities and language-specific "magic". In particular, go/wasm doesn't have GopherJS's "dual struct/object" magic, which allows you to embed a *js.Object in a struct, define struct fields with js:"jsName" tags, and have the compiler automatically change references to those fields into references to fields in the inner *js.Object. So to access a JavaScript object in go/wasm, you have to use a "naked" js.Value and either use thing.Get("jsField") (and related functions) everywhere (ew) or write access functions (less ew). You can also write GopherJS in the same style, and gopherwasm creates a compatability layer so the go/wasm style compiles under GopherJS.

The GopherJS-only version is tagged as v1, and also as gopherjs.

The wasm branch still exists, because I shared it pretty widely, and I want those links to keep working for a while.

So if you want to use the go/wasm code, and/or also use this exact code in GopherJS, use this branch. If you want the GopherJS-only code, use the v1 or gopherjs branch. Click on over to the README in that branch for installation instructions. They may need modification, since they still date to when hvue's "master" branch was GopherJS-only.

Install

Install Go 1.11

See https://golang.org/dl/.

Install hvue

(Side note: If you skipped it, please make sure you've read the Intro above about the difference between this (the go/wasm + GopherJS code), and previous GopherJS-only versions.)

cd path/to/github.com # in your $GOPATH
mkdir huckridgesw
cd huckridgesw
git clone [email protected]:HuckRidgeSW/hvue.git

Examples & Demos

Overview

Generally speaking, the examples follow the examples in the Vue guide. Some don't, because the Guide has changed since I wrote the examples. But most of them do.

01-introduction has examples from the Vue Introduction page.

02-lifecycle demos Vue lifecycle hooks but does not correspond to any specific example on that page.

03-computed-basic and 04-computed-with-setter have examples from Computed Properties and Watchers.

And so on. Links are in the code.

Running the examples

GopherJS

cd path/to/github.com/huckridgesw/hvue
echo "var hvue_wasm = false;" > examples/maybe_wasm.js
gopherjs serve github.com/huckridgesw/hvue # listens on 8080

and then

• http://localhost:8080/examples/01-introduction/
• http://localhost:8080/examples/02-lifecycle/
• http://localhost:8080/examples/ for more

WASM

cd path/to/github.com/huckridgesw/hvue
echo "var hvue_wasm = true;" > examples/maybe_wasm.js
go run examples/server/main.go # Listens on 8081
cd examples/??-???? # some examples directory
GOARCH=wasm GOOS=js go build -o ${PWD##*/}.wasm main.go # compile wasm

and then

• http://localhost:8081/examples/01-introduction/
• http://localhost:8081/examples/02-lifecycle/
• http://localhost:8081/examples/ for more

Remember to recompile after any changes. There's no facility yet to auto-build (a-la gopherjs build -w or gopherjs serve).

Switching from GopherJS to WASM and back

• Do the appropriate "echo "var hvue_wasm = ?;" > examples/maybe_wasm.js. (See above.)
• Be sure to do "shift-cmd-R" (Chrome, macOS; other browsers / OSes will vary) to reload without using the cache, to get the new maybe_wasm.js and/or new wasm. (Actually I'm not sure you need that to get new wasm, since it's loaded via an explicit fetch() call, but it's probably not a bad idea.) Alternatively, in Chrome you can open the developer console, go to the network tab, and check "disable cache". (AIUI only works while said console window is open.)

GoDoc

http://godoc.org/github.com/HuckRidgeSW/hvue