Integrate a heavy Vue Component

We can abstract any complicated of server side render component with htmlgo. But a lots of components in the modern web have done many things on the client side. means there are many logic happens before the it interact with server side.

Here is an example, a rich text editor. you have a toolbar of buttons that you can interact, most of them won't need to communicate with server. We are going to integrate the fantastic rich text editor tiptap to be used as any htmlgo.HTMLComponent.

Step 1: Create a @vue/cli project:

$ vue create tiptapjs

Modify or add a separate vue.config.js config file,

  • Enable runtimeCompiler so that vue can parse template html generate from server.
  • Made Vue as externals so that it won't be packed to the dist production js file, Since we will be sharing one Vue.js for in one page with other libraries.
  • Config svg module to inline the svg icons used by tiptap

Step 2: Create a vue component that use tiptap

Install tiptap and tiptap-extensions first

$ yarn add tiptap tiptap-extensions

And write the editor.vue something like this, We omitted the template at here.

We injected the this.$plaid(). that is from web/corejs, Which you will need to use For every Go Plaid web applications. Here we uses one function fieldValue from it. It set the form value when the rich text editor changes. So that later when you call EventFunc it the value will be posted to the server side. Here we will post the html value. Also allow component user to set fieldName, which is important when posting the value to the server.

Step 3: At main.js, Use a special hook to register the component to web/corejs

Step 4: Test the component in a simple html

We edited the index.html inside public to be the following:

  • For http://localhost:3500/app.js to be able to serve. you have to run yarn serve in tiptapjs directory.
  • http://localhost:3100/app.js is QOR5 web corejs vue project. So go to that directory and run yarn serve to start it. and then in
  • Run a web server inside tiptapjs directory like python -m SimpleHTTPServer and point your Browser to the index.html file, and see if your vue component can render and behave correctly.

Step 5: Use packr to pack the dist folder

We write a packr box inside tiptapjs.go along side the tiptapjs folder.

And write a build.sh to build the javascript to production version, and run packr to pack them into a_tiptap-packr.go file.

Step 6: Write a Go wrapper to wrap it to be a HTMLComponent

Step 7: Use it in your web app

To use it, first we have to mount the assets into our app

And reference them in our layout function.

And we write a page func to use it like any other component:

And now let's check out our fruits: