How to write universal code using composition API in Quasar?

Question

Quasar website explains that to write universal code, the code that is in created and beforeCreate lifecycle hooks for Vue components is executed in Server Side Rendering (SSR). My question is: What about setup? How can I achieve SSR functionality with composition API? How can I write universal code in composition API? How do I determine which code is executed in SSR with composition API?

Answer 1

Thanks @kissu, and @Estus Flask for your comments.

To use Quasar in SSR mode:

quasar dev -m ssr

In a Vue component with composition API:

<script setup>
import { onBeforeMount } from "vue";

defineOptions({
  preFetch: () => console.log("I am in SSR!"),
});

console.log("I am in both!");

onBeforeMount(() => console.log("I am in SPA!"));
</script>