Accessing properties globally in Vue.js with prototypes
Tags: vue, javascript
Published: 2019-08-21 19:25:48

---
title: Accessing properties globally in Vue.js with prototypes
published: true
tags: vue, javascript 
canonical_url: https://blog.logrocket.com/accessing-properties-globally-in-vue-js-with-prototypes/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/e8uhjohxwashyj9naqc8.jpeg
---
**Written by [Nwose Lotanna](https://blog.logrocket.com/author/nwoselotanna/)**✏️

In this post, you will be introduced to using prototypes in Vue.js to access properties globally instead of using multiple imports in your workflow.

## Before you start…

This post is suited for developers of all stages, including beginners. Here are a few things you should already have before going through this tutorial:

- Node.js version 10.x and above installed. You can verify whether you do by running the command below in your terminal/command prompt:
```jsx
node -v
```
- A code editor — I highly recommend Visual Studio Code
- Vue’s latest version, installed globally on your machine
- Vue CLI 3.0 installed on your machine. To do this, uninstall the old CLI version first:
```jsx
npm uninstall -g vue-cli
```

Then, install the new one:

```jsx
npm install -g @vue/cli
```
- Download a Vue starter project [here](https://github.com/viclotana/vue-canvas)
- Unzip the downloaded project
- Navigate into the unzipped file and run the command below to keep all the dependencies up to date:
```jsx
npm install
```

## How imports help us access files

While working in your Vue project, the fastest way to access a new component in another one or a nested one is simply by importing the needed component or resource.

This can easily become inefficient, however, since you will have to repeat import statements and even register components for each import (if they _are_ components). Luckily, Vue provides a more efficient way to handle this for cases in which you have globally defined a data object or an incoming HTTP request.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## `Vue.prototype`

To create a global property in your Vue application and then access it through a property statement instead of an import statement, Vue provides a platform we call prototypes. This way, you define the global property or data object, telling Vue to remember it as one, and then access it in any component with just a line of code.

### Prototype syntax

The definition of a Vue prototype in your main JavaScript file will look like this:

```jsx
Vue.prototype.$blogName = ‘LogRocket’
```

Here, `blogName` is the property or data name and the `LogRocket` string is the value. With this definition, Vue.js gets this property (the blog name, in our case) available to every Vue instance in the entire project even before the instance is created.

### The `$` sign

The `$` sign is used in Vue.js to identify properties that can be used in all available instances in any given Vue project. This distinction was made due to conflicts relating to property name definitions and access. With the `$` sign, there is a clear difference between properties and global properties available to all instances.

### Demo

To follow through with this section, you must have read this post from the start, downloaded the starter project from the link above, and opened it up in VS Code. To illustrate the syntax example in the section above, open up your `main.js` file and add the prototype definition so the whole file looks like this:

```jsx
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
Vue.prototype.$blogName = 'LogRocket'
new Vue({
  render: h => h(App),
}).$mount('#app')
```

Now that you have defined a property name, open your root component and copy in the code block below:

```jsx
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test msg="Welcome to Your Vue.js App"/>
  </div>
</template>
<script>
import Test from './components/Test.vue'
export default {
  name: 'app',
  components: {
    Test
  },
   beforeCreate: function() {
    console.log(this.$blogName)
  }
}
</script>
```

Here you can see that the `beforeCreate` lifecycle hook method was used to validate the instantiation claims about Vue prototypes. If you run the application in your dev server, you will see the saved name (LogRocket) displayed in your browser console.

## Some Vue prototype use cases

A lot of data values, properties, and utilities like HTTP resources can be made global properties with Vue prototypes. In this section, I will introduce a few of them.

### Functions as prototypes

Vue.js allows you to add not only properties, but also methods as prototypes. With that, every instance in which the prototype is used gets access to the logic set up in the prototype definition.

This includes access to using `this` to access data, computed properties, and even other methods inside any Vue instance in the project. A quick example can be to use a string reversal function. In your `main.js` file, add the new prototype under the old one:

```jsx
Vue.prototype.$reverseString = function(x) {
  this = this
    .split('')
    .reverse()
    .join('')
}
```

Copy the code block below into your `app.vue` file:

```jsx
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test msg="Welcome to Your Vue.js App"/>
  </div>
</template>
<script>
import Test from './components/Test.vue'
export default {
  name: 'app',
  components: {
    Test
  },
  data() {
    return {
      msg: 'LogRocket'
    }
  },
   beforeCreate: function() {
    console.log(this.$blogName)
  },
  created: function() {
    console.log(this.msg) 
    this.$reverseString('msg')
    console.log(this.msg) 
  }
}
</script>
```

Here, the created lifecycle hook was used to log the `reverseString` function, and if you run your application in the dev server, you will see that LogRocket is printed in reverse.

### Prototypes for imports

If your application has communications with a third API, you will normally have to import Axios on each component you want to make a `get` request from. Here is a quick illustration — open a new terminal in your VS Code application and install Axios:

```jsx
npm install axios
```

Now, head to your `app.vue` file where you want to make a `get` request, and copy this code block inside:

```jsx
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test msg="Welcome to Your Vue.js App"/>
    <div v-for="user in users" :key="user.id">
      <p>{{user.name}}</p>
    </div>
  </div>
</template>
<script>
import Test from './components/Test.vue'
import axios from 'axios'
export default {
  name: 'app',
  components: {
    Test
  },
  data() {
    return {
      msg: 'LogRocket',
      users: []
    }
  },
  created: function (){
      axios.get('https://jsonplaceholder.typicode.com/users')
      .then(res => {
        this.users = res.data;
      })
  }
  ,
   beforeCreate: function() {
    console.log(this.$blogName)
  }
}
</script>
```

You will notice that for every component from which you want to make a get request, you will have to repeat this import statement. To solve this, Vue lets you use the prototype feature to import once and in any Vue instance in your project.

Open your `main.js` file and copy the code block below inside it:

```jsx
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.$blogName = 'LogRocket'
Vue.prototype.$reverseString = function(x) {
  this = this
    .split('')
    .reverse()
    .join('')
}
Vue.prototype.$axios = axios
new Vue({
  render: h => h(App),
}).$mount('#app')
```

In your `app.vue` file, delete the import statement and use the `$axios` alias you already created, like this:

```jsx
<script>
import Test from './components/Test.vue'
export default {
  name: 'app',
  components: {
    Test
  },
  data() {
    return {
      msg: 'LogRocket',
      users: []
    }
  },
  created: function (){
      this.$axios.get('https://jsonplaceholder.typicode.com/users')
      .then(res => {
        this.users = res.data;
      })
  }
  ,
   beforeCreate: function() {
    console.log(this.$blogName)
  }
}
</script>
```

![Completed List Import Demo](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2019/08/completed-list-import-e1565708685861.png?resize=730%2C377&ssl=1)

You can find the complete code to this tutorial [here on GitHub](https://github.com/viclotana/vue_prototypes).

## Conclusion

You have now been introduced to the concept of using prototypes in Vue to make properties globally available to all Vue instances in your project. You were also shown the advantages of using prototypes, including, but not limited to, a more efficient workflow. Happy hacking!
* * *
**Editor's note:** Seeing something wrong with this post? You can find the correct version [here](https://blog.logrocket.com/accessing-properties-globally-in-vue-js-with-prototypes/).

## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps
 
![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?resize=1200%2C677&ssl=1)
 
[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
[Try it for free](https://logrocket.com/signup/).
* * *
The post [Accessing properties globally in Vue.js with prototypes](https://blog.logrocket.com/accessing-properties-globally-in-vue-js-with-prototypes/) appeared first on [LogRocket Blog](https://blog.logrocket.com).