Client logic in SSR
Learn how to use client-side methods in SSR environments.
The methods exposed by the Plug only work on the client side. If you try to call them on the server side, you will get the following error:
Property croct.someMethod is not supported on server-side (SSR). Consider refactoring the logic as a side-effect (onMounted) or a client-side callback (onClick, onChange, etc).
When calling methods from the useCroct composable, the operations must be performed within the onMounted hook or client-side callbacks, such as @click or @change.
For example, if you want to track a goal when a user visits a pricing page, the following code will throw an error if executed on the server side:
<script setup>import {useCroct} from '@croct/plug-vue';
const croct = useCroct();
croct.track('goalCompleted', {goalId: 'pricing-page-view'});</script>
<template> <div> <h1>Pricing</h1> ... </div></template>
To fix this, refactor the tracking operation to run inside an onMounted hook:
<script setup>import {onMounted} from 'vue';import {useCroct} from '@croct/plug-vue';
const croct = useCroct();
croct.track('goalCompleted', {goalId: 'pricing-page-view'});onMounted(() => { croct.track('goalCompleted', {goalId: 'pricing-page-view'});});</script>
<template> <div> <h1>Pricing</h1> ... </div></template>