CODEWITHSUNDEEP
vue.jsvuejs2vuejs3vue-component
nowtsvashu
nowtsvashu

Reputation: 1

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

<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:".

Upvotes: 0

Views: 922

Answers (2)

N Jedidiah
N Jedidiah

Reputation: 1783

to solve this issue, make sure you export your actions as below

// Import Axios instance with base configuration

// Vuex module for authentication and permissions
const state = {
//
};

const mutations = {
//
};

// Individual actions exported as named exports
export async function registerUser(_, { name, email, password, password_confirmation }) {
//
}

// Export the module as a default export
export default {
  namespaced: true,
  state,
  mutations,
  getters,
};

Upvotes: 0

Legit007
Legit007

Reputation: 193

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

Upvotes: 0

Related Questions