Search code examples
vue.jsvue-resource

Vue js: cannot redefine property: $url

I'm trying to use an ajax request by vue-resource to fill my data in vuejs.

But when I require the vue-resource returns in console this message: Uncaught TypeError: Cannot redefine property: $url

The error occurs in code:

var Vue = require('vue');
Vue.use(require('vue-resource'));
Solution

  • It happens because you are calling the vue-resource twice!

    As I know you are using Laravel + Vue + Vue Resource + Vueify + Browserify (sorry guys, I don't have enough reputation to add a comment on his question so I asked him through other way) make sure your code is like that:

    main.js

    'use strict';

import Vue from 'vue';
import VueResource from 'vue-resource';
import TrainingsList from './components/trainings/List.vue';

Vue.use(VueResource);

new Vue({
  el: 'body',
});

    As you are importing the VueResource through your main.js:

    import VueResource from 'vue-resource';

    BE SURE it's not on your gulpfile.js. The code bellow is your problem as you are importing Vuejs by Browserify and compiling through gulp

    mix.scripts([
  '/../../../node_modules/vue/vue.js',
  '/../../../node_modules/vue-resource/vue-resource.js',
], 'public/js/scripts.js');

mix.browserify('main.js');

    Everything you need to do is remove your vue and vue-resource from the gulpfile and your problem goes away!