Vue <script setup>, unable to use defineProps and defineEmits without importing it

user_9660082 0
Viewed 4515

As per the official documentation,

defineProps and defineEmits are compiler macros only usable inside <script setup>. They do not need to be imported and are compiled away when <script setup> is processed.


The problem definition

I'm not able to use defineProps and defineEmits in <script setup> without importing it. Please refer to the error screenshot attached below.

not able to use defineProps without importing it in


The vue code which I'm executing
<!-- HelloWorld.vue -->
<template>
  <h1>{{ props.message }}</h1>
</template>

<script setup>
// import { defineProps } from 'vue';
const props = defineProps({
  message: {
    type: String,
    required: true,
  }
});
</script>

The environment details for reference:
vue ^3.2.6 (3.2.19)
vue-cli @vue/cli 5.0.0-beta.4
node: v14.16.1
npm 6.14.12
vue-props vue-sfc vue-script-setup vuejs3 vue-composition-api
1 Answers

We can resolve this issue with one of the below solutions.

  1. Create Vue project with Vite. Follow this link for more information.
    yarn create vite <project-name> --template vue
  2. Add below rules in your eslint configuration file. Follow this link for more information.
// .eslintrc.js
module.exports = {
  extends: ['plugin:vue/base'],
  rules: {
    'vue/script-setup-uses-vars': 'error',
  }
}
user_96600820
Related