How to not to expose some variables from script setup to the template?

Question

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

Answer 1

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:

https://vuejs.org/api/composition-api-setup.html

Answer 2

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

Answer 3

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:

• How to make a private call when using SSR Nuxt?
• CORS error and secret keys in network tab

---

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.