Using Vue

GOX allows you to use Vue components within GOX templates. The integration automatically manages your compilation, loading, assembly and disassembly in the browser.

Install Vue

Run the following command from the root of the project:

gox client add vue

The command creates the Vue environment within client/vue/, installs the necessary dependencies and generates the shared bundle used by the Vue components.

Created structure

After running the command, the project contains the following structure:

client/
└── vue/
    ├── node_modules/
    ├── package.json
    ├── pnpm-lock.yaml
    └── pnpm-workspace.yaml

The command prepares the environment of the framework, but does not create example components. The components can be organized freely within the framework. client/vue/.

Create a Vue component

Create the following file:

client/vue/menu/Menu.vue

The file must export the component by means of a default export:

<script setup>
import { ref } from "vue"

defineProps({
    name: String
})

const isOpen = ref(false)
</script>

<template>
    <nav>
        <button @click="isOpen = !isOpen">
            Menú de {{ name }}
        </button>
        <p v-if="isOpen">El menú está abierto.</p>
    </nav>
</template>

The components they use <script setup> automatically generate the default export that GOX uses as a mounting point.

The developer doesn't need to matter. createApp, manually assemble the component or manage its disassembly. GOX automatically performs these operations by integrating Vue.

Use the component in GOX

Declares the component by indicating its name, framework and source file:

client Menu vue {
    src: "menu/Menu.vue"
}

The route of src is resolved from client/vue/. So, menu/Menu.vue corresponds to:

client/vue/menu/Menu.vue

See Client declarations to know all the properties and rules of a statement.

After declaring it, use a Client tag to include it in the Template:

<@Menu hydrate="idle" name="George" />

In this example:

• hydrate establishes the hydration strategy.
• name is sent to the Vue component as a prop.

See Props to know how GOX transfers values to the component and Hydrate to know the activation strategies available.

The component may also contain a SSRT to present initial content generated by the server before Vue is activated.

Full example

module index

import "github.com/gox-lang/gox"

client Menu vue {
    src: "menu/Menu.vue"
}

func GET(ctx *gox.Context) gox.Page {
    return <html>
        <head>
            <title>Menú de George</title>
        </head>
        <body>
            <@Menu hydrate="idle" name="George" />
        </body>
    </html>
}

The pages using Client components should include <head>where GOX adds the Import Map necessary to load Vue and the component in the browser.

Best practices

• Keep the Vue components inside client/vue/.
• Organizes related components in subdirectories.
• Use files .vue for components.
• Use <script setup> to automatically generate the default export.
• Do not manually mount or dismount the component.
• It uses routes relating to client/vue/ on the property src.
• Keep in GOX the initial information to be given from the server.

See also

• Client declarations
• Props
• SSRT
• Hydrate
• Import Map