CODEWITHSUNDEEP
javascriptvue.jsvuejs2
stack
stack

Reputation: 169

Getting error while importing {ref} from vue?

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://v2.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!

Upvotes: 7

Views: 21770

Answers (2)

Piece
Piece

Reputation: 828

Vue2 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
    }
  }
}

Upvotes: 1

Jason
Jason

Reputation: 734

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

Upvotes: 2

Related Questions