I want to access the "name" variable from <script> in my <script setup> block. I cant seem to figure out how to do it. I have tried importing options from '*.vue' but that prompts me to install module '*.vue'.
<script>
export default {
name: 'some name'
}
</script>
<script setup>
//use the 'name' variable here
</script>
You can access options exported from <script> by creating a circular dependency to the Vue component:
<script>
export default { name: "MyComponent" }
</script>
<script setup>
// HACK: Create a circular dependency to this file to get access to options.
import ThisComponent from "./MyComponent.vue"
console.log(`Setting up ${ThisComponent.name}`);
</script>
It also works with TypeScript (lang="ts").
Unfortunately, this thing can't be done. You could use ref and access its value anywhere in the file.
<template>
<h1>{{ name }}</h1>
</template>
<script setup>
import {ref} from 'vue';
const name = ref('Jorgen');
</script>
If you want to access it's value inside <script setup> you have to use .value.I have provided the following example in case you want to use it inside a method within <script setup>,
<script setup>
import {ref} from 'vue';
const name = ref('Jorgen');
const showMyName = () => {
alert(name.value);
}
</script>
In brief, if you want to use name inside the template don't use .value, if you want to use name inside use .value
nameproperty? It defines the display name of the component, and otherwise is only used for self-reference in the template. There should be no reason to need it in a component's code.nameis forced to be filename in script setup. If generated name is acceptable, you can use getCurrentInstance().proxy.$options.name , but it's not reliablegetCurrentInstance().proxy.$options.nameand get that name. Try it and tell us what happens :)<script> import NAME_CONSTANT from 'someFile' export default { name: NAME_CONSTANT } </script> <script setup> //use NAME_CONSTANT here </script>