Getting error while importing {ref} from vue?

2
votes

I am a newbie to vue js learning from vue-mastery tutorials and I wrote a code by seeing the tutorial My code is 

<template>
<div>Capacity: {{ capacity }}</div>
</template>

<script type="module">
import { ref } from "vue";
export default{
setup(){
const capacity = ref(3);
return { capacity };
}
};
</script>

I am getting the error in terminal when I run this code is "export 'ref' was not found in 'vue' And in web browser error is vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "capacity" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> at src/App.vue

My requirement is to print capacity: 3 in the browser anyone please help me Thanks in advance!

2
javascriptvue.jsvuejs2
setup() is part of the Composition API, which is a valid structure only in Vue 3.0+ or with the vuejs/composition-api plugin. Are you using one of those? – Augusto Moura
Yes @AugustoMoura My vue --version is @vue/cli 4.2.2 – stack
@AugustoMoura When I did this command npm list vue I got this [email protected] can you please help me?? – stack
vue-cli is not vue it's a cli tool, so using v-4.2.2 reallt only affects how you bootstrap your project. – Michael
yes mine vue is version 2 – stack

2 Answers

2
votes

Your code is using the Composition API, which is not supported in the current version of Vue (it will be part of Vue 3, released later this year)

For now, you can either download the Composition API plugin, or switch to the Options API, which is the current supported way of making single file components in Vue

1
votes

Current Vue Js doesn't support {ref} package.

There are 2 methods

  1. import @vue/composition-api npm package and you can use like this

     import { ref } from "@vue/composition-api"
 export default{
   setup() {
     const capacity = ref(3);
     return { capacity }
   }
}

  1. You can use the traditional method

    export default {
  data() {
    return {
      capacity: 3
    }
  }
}