Error: The requested module 'vue' does not provide an export named 'default'

Question

<template>
  <div id="app">
    <p>Watched Value: {{ watchedValue }}</p>
    <input v-model="inputValue" placeholder="Enter a value" />
  </div>
</template>

<script>
import Vue from 'vue';

const app = new Vue({
  el: '#app',
  data() {
    return {
      inputValue: '',
      watchedValue: ''
    };
  },
  watch: {
    inputValue(newValue) {
      this.watchedValue = `You entered: ${newValue}`;
    }
  }
});
</script>

Inside the setup function, we create a reactive object state with properties inputValue and watchedValue. We use the watch function to watch for changes in the inputValue. Whenever the inputValue changes, the callback function is triggered. In this case, we update the watchedValue to include the entered value by assigning it the string You entered: ${newValue}. In the template, we display the watchedValue using Vue's data binding syntax ({{ variable }}), and bind the input field to the inputValue using v-model. As the user types in the input field, the inputValue is updated reactively, triggering the watch effect. The watchedValue is then updated to display the entered value prefixed with "You entered:".

score 0 · Answer 1 · answered Jun 15 '23 at 12:27

Have a look at this question first: Vue 'export default' vs 'new Vue'

I think you try to import your "component" so you need to provide:

  export default {
       components: {
      myComponent
  }
  data () {
  return {}
 }
 ...

}

Your Syntax is for the root component and can not be used like

<my-component></my-component>

in the parent component

Error: The requested module 'vue' does not provide an export named 'default'

1 Answers1