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
Step 1: Create a @vue/cli project:
$ vue create tiptapjs
Modify or add a separate
vue.config.js config file,
runtimeCompilerso that vue can parse template html generate from server.
Vueas 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
$ 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
Step 3: At
main.js, Use a special hook to register the component to
Step 4: Test the component in a simple html
We edited the
index.html inside public to be the following:
http://localhost:3500/app.jsto be able to serve. you have to run
yarn servein tiptapjs directory.
http://localhost:3100/app.jsis QOR5 web corejs vue project. So go to that directory and run
yarn serveto start it. and then in
- Run a web server inside tiptapjs directory like
python -m SimpleHTTPServerand 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
Step 6: Write a Go wrapper to wrap it to be a
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: