Vue.js Syntax Error (SCRIPT1003) IE11 and lower

Question

When i try my vue.js app in IE11 or lower i get Error SCRIPT1003 excepted : in the console which points to routeContent. My Snytax looks like this:

var store = new Vuex.Store({
    state: {
        routeContent: null
    },
    mutations: {
        routeContent(state, payload) {
            state.routeContent = payload
            document.title = payload.title
        }
    }
})

Answer 1

You're trying to use the object method shorthand in your definition of routeContent - this isn't supported in Internet Explorer or Safari .

The two options you have are to either start using a transpiler such as Babel to convert modern JS syntax into a form that older browsers can understand - or, if that's too much hassle, you could just switch back to using the good old-fashioned function syntax:

var store = new Vuex.Store({
    state: {
        routeContent: null
    },
    mutations: {
        routeContent: function (state, payload) {
            state.routeContent = payload
            document.title = payload.title
        }
    }
})

Answer 2

Here is another similar question: javascript Ajax SCRIPT1003: Expected ':' in IE 11

I think you may have to do as follows:

mutations: {
    routeContent: function(state, payload) {  // making it obvious that this is a function
        state.routeContent = payload;
        document.title = payload.title;  // and also the semicolons
    }
}