CODEWITHSUNDEEP
vuejs3vue-script-setup
husayt
husayt

Reputation: 15139

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

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

Upvotes: 5

Views: 1902

Answers (3)

Stefano Nepa
Stefano Nepa

Reputation: 500

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

Upvotes: 1

kissu
kissu

Reputation: 46696

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.

Upvotes: 0

Gabor Angyal
Gabor Angyal

Reputation: 2255

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

Upvotes: 5

Related Questions