As it mentions here all the top level bindinigs introduced in script setup are exposed to template.
Question: How to exclude some of them? Something like private vairables which are only available inside script setup but not then passed to template
3 Answers
There is no way to do that with script setup. For advanced use cases use a setup function, where you can choose what to expose:
You can't hide things on the client-side, you'll need a server (SSR with Nuxt for example) or a middleware of some sort (backend proxy, serverless function, etc...).
Here are two answers related to this question:
If by private, you mean OOP's private variables, then it's another subject: https://www.sitepoint.com/javascript-private-class-fields/#privateclassfields
If you want to only not expose the variables, then you'll need to use regular setup() into a script() and return only some of them. I don't think that there is a hide() function of some sort in Vue3.
Have you thought about using defineExpose to define only what you want to expose?
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>
ref. https://vuejs.org/api/sfc-script-setup.html#defineexpose
Related