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

Question

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.

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

Vijay Sasvadiya · Accepted Answer · 2021-10-12 09:02:09Z

6

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

Create Vue project with Vite. Follow this link for more information.
yarn create vite <project-name> --template vue
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',
  }
}

answered Oct 12, 2021 at 9:02

Vijay Sasvadiya

4141 gold badge4 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lothir Over a year ago

In second solution it's wrong link. It should be: link , and code should be: module.exports = { env: { 'vue/setup-compiler-macros': true } }

Jürgen Wißkirchen Over a year ago

@Lothir: I guess it depends regarding the code. Adding the rules of the answer worked fine for me, while setting the env in your suggestion gave me an error on linting...

javad · Accepted Answer · 2023-05-08 14:01:52Z

3

use first script:

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

<template>
  <h1>{{ props.message }}</h1>
</template>

and you can use typescript:

<script setup lang="ts">

const props = defineProps<Props>();

interface Props {
  message: string
}

</script>

<template>
  <h1>{{ props.message }}</h1>
</template>

answered May 8, 2023 at 14:01

javad

314 bronze badges

Collectives™ on Stack Overflow

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

The problem definition

The vue code which I'm executing

The environment details for reference:

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The problem definition

The vue code which I'm executing

The environment details for reference:

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related