Question: I need access to my `hostname` variable in every component.

Is it a good idea to put it inside `data`?

Am I right in understanding that if I do so, I will able to call it everywhere with `this.hostname`?

Answer: 
I strongly recommend taking a look at [Vuex](https://vuex.vuejs.org/guide/), it is made for globally accessible data in Vue.

If you only need a few base variables that will never be modified, I would use ES6 imports:

```
// config.js
export default {
   hostname: 'myhostname'
}

// .vue file
import config from 'config.js'

console.log(config.hostname)

```

You could also import a `json` file in the same way, which can be edited by people without code knowledge or imported into SASS.
For any Single File Component users, here is how I set up global variable(s)

1. Assuming you are using Vue-Cli's webpack template
2. Declare your variable(s) in somewhere variable.js

```
 const shallWeUseVuex = false;

```
3. Export it in variable.js

```
 module.exports = { shallWeUseVuex : shallWeUseVuex };

```
4. `Require` and assign it in your vue file

```
 export default {
     data() {
         return {
             shallWeUseVuex: require('../../variable.js')
         };
     }
 }

```

Ref: <https://v2.vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch>