Using the 'Custom Code' Block

The Custom Code block is a fully customisable block that you can add anywhere in your interface. When you select it, its options show three code panels:

• HTML: the template.
• CSS: SCSS or plain CSS, scoped to this block.
• Javascript: the component's logic.

It compiles to a Vue 3 single-file component, so you can use everything Vue 3 offers, including:

• Data
• Methods
• Computed properties
• Watchers
• Lifecycle hooks

We strongly recommend reading the Vue component basics documentation to see what's possible.

Writing the JavaScript

The Javascript panel must contain a single object in braces holding your component options:

{
    data() {
        return { count: 0 };
    },
    methods: {
        increment() {
            this.count++;
        },
    },
}

Don't write export default { ... }, and don't leave out the outer braces. Either one stops the block compiling.

Server rendering: created() versus mounted()

Published sites are rendered on the server first, then brought to life in the visitor's browser. Your block's created() hook runs during the server render as well, where there is no window, document or localStorage.

• Put anything that needs the browser in mounted(). That includes reading or changing the page, adding window or scroll listeners, using matchMedia, starting a canvas or map, and loading external scripts or styles.
• Use created() only for work that's safe anywhere, such as setting up data or loading content with the SDK.

Browser-only code in created() can stop the page rendering. If the block sits in your header or footer, that can take down every route of the site. When a block throws an error, Qik stops it rendering, but don't rely on that: test in the preview and on your staging application before you publish.

Using the JavaScript SDK

The Qik JavaScript SDK is available in every Custom Code block, in both the HTML template and the JavaScript. It's at this.$sdk in your JavaScript and $sdk in your template. The SDK also includes an app service at $sdk.app, with tools for working inside your interface: the current route, menus, the signed-in user, the device and navigation. See Using the Javascript SDK.

Reacting to route changes

Read the current route from $sdk.app.route. To run code each time the visitor moves to another route, for example to close a mobile menu, listen for the SDK's route:change event. Add the listener in mounted() and remove it in beforeUnmount(). Don't use watch: { $route: ... }, because Qik handles navigation itself and a $route watcher may never fire. See The current route for an example.

Using services

If you've created services in your interface, you can reach them through the SDK:

{
    computed: {
        myService() {
            return this.$sdk.app.services.yourServiceName;
        },
    },
}

See Services.

Using components

If you've created components in your interface, use them like any other HTML element by adding their tag to your template, for example <my-custom-component hello="world" />. See Components.

Turning it into a reusable block

If you find yourself copying the same Custom Code into several places, click the Convert into a Block button (the arrow icon at the top of the block's options). Enter a title, and Qik creates a block from the code, swaps this instance for it and opens the new block for editing. You can then drag the block in from the Mine tab wherever you need it. See Creating your own blocks.

FAQs