How to use `<script setup>`?

Question

Vue version: 3.0.11

With the following code:

<template>
  <button @click="inc">{{ count }}</button>
</template>

<script setup>
  import { ref } from 'vue'

  export const count = ref(0)

  export const inc = () => count.value++
</script>

I got:

ERROR  Failed to compile with 1 error
 error  in ./src/views/HyperScript.vue?vue&type=script&setup=true&lang=js

Syntax Error: TypeError: Cannot read property 'content' of null


 @ ./src/views/HyperScript.vue?vue&type=script&setup=true&lang=js 1:0-293 1:0-293 1:294-576 1:294-576
 @ ./src/views/HyperScript.vue
 @ ./src/router/index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.6.175:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

Wenfang Du · Accepted Answer · 2021-04-23 11:06:23Z

7

You don't need to add export in your script :

<template>
  <button @click="inc">{{ count }}</button>
</template>

<script setup>
  import { ref } from 'vue'

  const count = ref(0)

  const inc = () => count.value++
</script>

Live Demo

edited Apr 23, 2021 at 11:06

Wenfang Du

12k13 gold badges80 silver badges116 bronze badges

answered Apr 21, 2021 at 9:31

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

How to use `<script setup>`?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related