0

i can not use vue routes get's the following error( npm 3.10.10, webpack 3.8.1). How to solve this

Failed to compile.

./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/quotes.vue Module not found: Error: Can't resolve './components/quote.vue' in 'D:\vue\vue-laravel\src\components' @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/quotes.vue 11:0-43 @ ./src/components/quotes.vue @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

I use webpack-simple

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import NewQuote from './components/new-quote.vue'
import Quotes from './components/quotes.vue'

Vue.use(VueRouter)

const routes = [
  {path: '', component: Quotes},
  {path: '/new-quote', component: NewQuote}
]

const router = new VueRouter({
    mode:'history',
    routes // short for `routes: routes`
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

Quotes.vue

<template>
  <div>
    <button class="btn btn-primary" v-on:click="onGetQuotes">Get Quotes</button>
    <hr>
    <app-quote v-for="quote in quotes" v-bind:qt="quote"></app-quote>
  </div>
</template>

<script>
import axios from 'axios';
import Quote from './components/quote.vue';

export default {
  data(){
    return{
       quotes:[]
    }
  },
  components:{
    'app-quote' : Quote
  },
  methods:{
    onGetQuotes(){
      axios.get('http://localhost:8000/api/quotes')
       .then(response => {
          console.log(response);
       })   
       .catch(e => {

       }); 
    }
  }
}
</script>

<style>

</style>

Quote.vue

<template>
  <div>
    <div class="panel panel-default">
    <div class="panel-heading">Simple Quotes</div>
    <div class="panel-body">
       {{ qt.content }}
    </div>
    <div class="panel-footer">
      <div>
         <input type="text">
         <a href="" v-on:click="onUpdate">Save</a>
         <a href="" v-on:click="onCancel">Cancel</a>
      </div>
      <div>
         <a href="" v-on:click="onEdit">Edit</a>
         <a href="" v-on:click="onDelete">Delete</a>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  props : ['qt'],
  data(){
    return{

    }
  },
  methods:{

  }
}
</script>

<style>

</style>

new-quote.vue

<template>
  <div>
    <div class="panel panel-default">
      <div class="panel-heading">Simple Quotes</div>
      <div class="panel-body">

         <form v-on:submit.prevent="createQuote">
            <div class="form-group">
              <label for="content">Content:</label>
              <input type="text" class="form-control" v-model="quoteContent">
            </div>
            <button type="submit" class="btn btn-default">Create New Quote</button>
         </form> 

      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data () {
    return {
      quoteContent:''
    }
  },
  methods:{
   createQuote(){
      axios.post('http://localhost:8000/api/quote', {
        content: this.quoteContent
      })  
      .then(response => {
        console.log(response);
      })
      .catch(e => {

      });
    }
  }
}
</script>

<style>

</style>   

App.vue

<template>
  <div id="app">
  <div class="container">
    <router-view></router-view>
  </div>
  </div>
</template>

<script>

export default {
  data () {
    return {

    }
  }
}
</script>

<style>

</style>
5
  • 1
    Just for the record: the missing thing quote.vue is not your code? Commented Oct 19, 2017 at 8:45
  • 1
    Module not found: Error: Can't resolve './components/quote.vue' in 'D:\vue\vue-laravel\src\components' - are you certain your quote.vue exists in src/components? Commented Oct 19, 2017 at 8:48
  • oh it's a shame . i have used { import Quote from './components/quote.vue } instead of { import Quote from './quote.vue }. Now works fine but display following error in console Commented Oct 19, 2017 at 8:59
  • client?cd17:147 ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-4782daac","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0&bustCache!./src/components/quotes.vue (Emitted value instead of an instance of Error) <app-quote v-for="quote in quotes">: component lists rendered with v-for should have explicit keys. See vuejs.org/guide/list.html#key for more info. @ ./src/components/quotes.vue 10:0-257 @ ./src/main.js @ multi (webpack)-dev-server/client?localhost:8080 webpack/hot/dev-server ./src/main.js Commented Oct 19, 2017 at 9:01
  • 1
    Can you try updating your npm to the latest version first? That is seriously way outdated now. Commented Oct 19, 2017 at 9:14

2 Answers 2

1

I have used { import Quote from './components/quote.vue } instead of { import Quote from './quote.vue }. Now works fine

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

Comments

0

Its './components/Quote.vue' with a capital Q

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.