How do I declare code outside setup() in a script-setup SFC?

[spaceemotion]

I am currently working on an app with a custom component library that uses tailwind. Recently, I came across libraries like https://github.com/joe-bell/cva that help with managing classes, but I was wondering if I can use them in a <script setup> SFA without worrying about performance.

These initialization of these helpers usually happens outside the setup() and render() scope.

Does the SFC compiler handle these cases automatically (e.g. hoist them up or something)?

Thanks in advance!

[spaceemotion]

I've used the Vue SFC Playground to expirement a bit and have found the following solution: Simply split up the script-setup into two script blocks to not have the compiler put the cva() calls inside the setup() method. Like so:

<script>
// Add all your cva() calls here
const button = cva();
</script>

<script setup>
// You can still use the button variable here
const classes = computed(() => button({}));
</script>

<template>
<!-- And even in the template it will work -->
</template>