Menu
Options API:
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'CustomName', // 👈
inheritAttrs: false, // 👈
setup() {
return {}
},
})
</script>
How to do that in <script setup>, is there an equivalent for name and inheritAttrs like defineProps and defineEmits?
<script setup>
// 👉 how to define them here?
</script>
925
Add a script tag inside your Vue component template. Just add the script into the component template. But don't forget to add, type="application/javascript" to the script tag otherwise it will show an error during the build. However, if you have added document.
setup can also return a render function which can directly make use of the reactive state declared in the same scope: js import { h, ref } from 'vue' export default { setup() { const count = ref(0) return () => h('div', count. value) } } Returning a render function prevents us from returning anything else.
When we want to globally register a component in Vue, we need to do it in this file. All you have to do is import your component, as you usually would, and then register it using app. component . import { createApp } from 'vue' import App from './App.
<script setup> is a compile-time syntactic sugar for using Composition API inside Single-File Components (SFCs). It is the recommended syntax if you are using both SFCs and Composition API. It provides a number of advantages over the normal <script> syntax:
Usage of slots and attrs inside <script setup> should be relatively rare, since you can access them directly as $slots and $attrs in the template. In the rare case where you do need them, use the useSlots and useAttrs helpers respectively:
Components using <script setup> are closed by default - i.e. the public instance of the component, which is retrieved via template refs or $parent chains, will not expose any of the bindings declared inside <script setup>. To explicitly expose properties in a <script setup> component, use the defineExpose compiler macro:
The <script setup> syntax provides the ability to express equivalent functionality of most existing Options API options except for a few:
nameinheritAttrsIf you need to declare these options, use a separate normal <script> block with export default:
<script>
export default {
name: 'CustomName',
inheritAttrs: false,
customOptions: {},
}
</script>
<script setup>
// script setup logic
</script>
Compiled output:
<script>
export default {
name: 'CustomName',
inheritAttrs: false,
customOptions: {},
setup() {
// script setup logic
},
}
</script>
there is a vite plugin vite-plugin-vue-setup-extend can resolve set component name.
// vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
plugins: [
VueSetupExtend()
]
})
<script lang="ts" setup name="CompName">
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
