Laravel 5.3 Vue.js http get URL

Just use '/exp/laravel-vuejs/api/tips' - if the address starts with a forward slash it will be relative to the domain.

You need to change document root to the folder where you code is located.

exp/laravel-vuejs

What are you using? XAMPP? Homestead?

gregrobson, I don't like this solution because there will be a lot of such http calls and I don't wish to change them one by one when I go live.

bugsysha,

XAMPP, How do I do that please?

Ah, okay. Yes, you definitely want dev and production environments to match - I didn't realise the roots were different.

I don't use XAMPP but if you google it I'm sure that you'll find what you need on the first page. I gave you an idea what to google for. Rest is up to you young padawan.

You could give https://github.com/aaronlord/laroute a try.

It allows you to just use laravel route names, so it's possible to just use something like

laroute.route('tips.index') // will generate a route for /api/tips

It can generate absolute urls (I didn't test that, but the feature is here) So it can generate urls based on your base url configured in config/app.php ('url' value)

Is there a way to use a global JS variable inside my Vue module??

Remove the forward slash from the url in your get request. When you prefix the vue-resource url with a forward slash, it removes everything from the url except the base domain name.

This:

this.$http.get('/api/tips', function(tips){
    this.$set('tips', tips)
});

Becomes:

this.$http.get('api/tips', function(tips){
    this.$set('tips', tips)
});

Route groups help a lot by the way. And no your API urls are pretty long. No other way around it just like any link.

You might want to think hard about: versioning your API routes/url and you don't want to change existing routes when in production, try to add routes not remove. People favorite irks and Ajax being JavaScript get cached on the client side so changing urls isn't very productive for the user experience.

Vue globals, if your using 5.3 Tayler put one for the crsf token, perfect example for you.

Not sure it's the best solution but at least I got it to work.

In my laravel view:

<input type="hidden" value="{{ url('/') }}" v-model="baseUrl" />

Vue:

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

new Vue({   
    el: '#tips',
    
    data:{
        newTip: { title: '', content: ''},
        submitted: false,
        baseUrl: '',
        tips: []
    },
    
    ready: function(){
        this.fetchTips();
    },
    
    methods:{
        
        fetchTips: function(){
            this.$http.get(this.baseUrl + '/api/tips', function(tips) {
                this.$set('tips', tips);
            });
        },
        
        addTip: function(e){
            e.preventDefault();
            var tip = this.newTip;
            tip.content = $('#tipRteInstance').html();
            this.tips.push(tip);
            this.newTip = { title: '', content: '' }; $('#tipRteInstance').html('');
            //Vue.http.options.emulateJSON = true;
            this.$http.post(this.baseUrl + '/api/tips', tip);
            this.submitted = true;
        }
        
    }
    
});