Common Vue Problems — Port Number, this, Global Variables, and JSON
By: John Au-Yeung
Tags: Technology, JavaScript, Software Development, Programming, Web Development

Photo by David Tostado on Unsplash

Vue.js makes developing front end apps easy. However, there are still chances that we’ll run into problems.

In this article, we’ll look at some common issues and see how to solve them.

How to Change Port Number in Vue CLI Project

We can change the port number that the Vue dev server listens to.

The config file for it is in /config/index.js .

We can change the port property value to change the port number.

To change it temporarily in a Vue CLI 3.x project.

We can set the --port option.

For instance, we can write:

npm run serve -- --port 3000

Alternatively, we can change it in the .env file with the PORT option.

For example, we can write:

PORT=8888

Then the app will be served from port 8888 locally.

Access External JSON in a Vue App

To access JSON in our component code, we can import the JSON file directly.

For instance, we can write:

<script>

import json from './json/data.json'

export default{

data(){

return{

json

}

}

}

</script>

We just import the JSON data file into the code.

Then we can use it anywhere as we do with any other JavaScript object.

The imported JSON data will now be reactive like any other piece of data.

Refreshing a Token with a Refresh Token in Axios

We can refresh a token with a refresh token in Axios by using an interceptor.

The interceptor is run recursively to recreate the interceptor with the new token.

For instance, we can write:

createInterceptor() {

const interceptor = axios.interceptors.response.use(

response => response,

error => {

if (errorResponse.status !== 401) {

return Promise.reject(error);

} axios.interceptors.response.eject(interceptor); return axios.post('/api/refresh_token', {

'refresh_token': this._getToken('refresh_token')

}).then(response => {

saveToken();

error.response.config.headers['Authorization'] = response.data.access_token;

return axios(error.response.config);

}).catch(error => {

destroyToken();

this.router.push('/login');

return Promise.reject(error);

}).finally(createInterceptor);

}

);

}

If an error is 401, then we reject the promise.

Then we remove the old interceptor with eject .

Next, we make a post request to get a new token with the refresh token.

Then we set the token as the value of the Authorization header.

We also save the token with saveToken .

If we failed to get the auth token with the refresh token, then we reject the promise with the error and redirect to the login route with Vue Router.

Then we called createInterceptor again.

Apply Global Variables to a Vue App

We can apply global variables in a Vue app by using the Vue.mixin method.

For instance, we can write:

Vue.mixin({

data (){

return {

hello: 'world'

}

}

})

Then the hello property is available everywhere.

We can do the same thing with any other method or property.

Now we can use this.hello .

To make it read-only, we can make it a getter with get .

For instance, we can write:

Vue.mixin({

data (){

return {

get hello(){

return 'world';

}

}

}

})

Now we can’t set a new value for this.hello .

Also, we can add a new property to Vue.prototype .

For instance, we can write:

Vue.prototype.$appName = 'example app';

Then we create a new Vue instance or a new component, we can access it by writing this.$appName .

Using this in Vue Components

To use this in callbacks that are in Vue Components, we use arrow functions or we can set the value of this to a constant.

For example, we can write:

getData() {

const self = this;

axios.post('/api/users', ...)

.then(function(response){

self.users = response

})

}

We assigned this to self before we use it in the callback because the callback is a traditional function.

In a traditional function, this has its own value, which would be the function itself.

self would reference the component since we assigned it to this outside.

To make our lives easier, we can use arrow functions:

getData() {

axios.post('/api/users', ...)

.then((response) => {

this.users = response

})

}

Photo by Jamie Street on Unsplash

Conclusion

We can change the port number in a Vue CLI project by changing various config files or command-line flags.

To add global variables to a Vue app, we can use mixins or add a property to a Vue ‘s prototype.

To use the correct value of this in a callback, we can use arrow functions or assign this to a variable outside the callback.

We can import JSON files and use them like JavaScript objects.