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 vue3 project:

$ pnpm create vue@latest

Modify or add a separate vite.config.ts config file,

• 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

$ pnpm install tiptap tiptap-extensions

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

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

Step 4: Use standard Go embed 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.

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

Step 6: 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: