vue Global Variable – define Superglobals

Question: how to declare global variable in vue js?, vue global variable undefined, how to load global variable when component instance loads vuejs?, vuejs mounted how to access global variable?

how to set global variable in vue js, how to define global variable in vue js, how to create global variable in vue js, vue js create global variable, vue js define global variable, vue js use global variable
how to set global variable in vue js

vue global variable

In this Article, We want to share with you how to set & get global variable in vue js. so you can set(declare) and get(fetch) global variable with this data value as well as use global variable in vuejs. if you assign global variable then you can simply Retrive or access global variable in vuejs single page web application.

generally we required to get a describe data all over our app vuejs components in such phase we can create a global variable in vuejs app’s by using this best syntax with global variable this.

Vue.prototype.$variablename

what does $ mean in javascript ?

so, here where $ is a simple naming convention to assign or declare the global vuejs variables.

  Global Config variable In Laravel 6 Example

Declaring a global variable

In this best example, we are declare global variable a $axios variable which helps us to use the instance axios object in our vuejs components to send the server side http call or requests.

Open you main.js file and add the below code.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.


Download Project Scripts

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

// global variable
Vue.prototype.$axios = axios


new Vue({
  render: h => h(App),
}).$mount('#app')

Accessing global variable

We can get the global variable from any component instance by using reference global variable from instance vuejs this.$variablename.

App.vue

<template>
  <div id="app">
    <ul v-for="product in products" :key="product.id">
      <li>{{product.id}}</li>
      <li>{{product.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      products: []
    };
  },
  created: function() {
    this.$axios.get("https://jsonplaceholder.typicode.com/products")
    .then(res => {
      this.products = res.data;
    });
  }
};
</script>

instance, axios meaning, what does js mean, what does $ mean in javascript, javascript dollar sign, define added, what does in the instance mean, javascript add property to object, add property to object javascript, js prototype, add to object javascript, js global variable, google prototype scopes, define instances, js add to object, axios app, prototype define
vuejs create global variable

vue global variable undefined

So you can see bellow full vuejs working example:

<!DOCTYPE html>
<html>
<head>
    <title>How to declare global variable in VueJS? - Pakainfo.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    
<div id="app">
    
  <p>Result : {{vueGlobalVariable}}</p>
  <button @click="clickFunction()">Click Me</button>
    
</div>
   
<script type="text/javascript">
     
    Vue.mixin({
      data: function() {
        return {
          variablename:'this is my pakainfo.com'
        }
      }
    })
 
    var app = new Vue({
      el: '#app',
      data: {
        vueGlobalVariable: ''
      },
      methods:{
        clickFunction: function () {   
            this.vueGlobalVariable = this.variablename;
        }
      }
    })
    
</script>
    
</body>
</html>

results:

Result : this is my pakainfo.com

Web Programming Tutorials Example with Demo

Read :

  Vue js Axios HTTP Put Method Example Tutorial From Scratch

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about How to declare a global variable in Vuejs?.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   VueJS Call Function on Page Load Example
  2.   Next and Previous buttons in VUEJS
  3.   Simple VueJS date picker Component
  4.   How to Select VueJs Check All Uncheck All Checkboxes
  5.   Simple Vue 2.0 Select All Checkbox
  6.   Laravel Global variable Sharing Data with all views
  7.   Vuejs Timing Events(vue setTimeout() Function) Examples
  8.   Laravel 5.6 Share Variable With Display Data in View
  9.   Managing Dates and Times Using Vue.js?
  10.   Custom Radio Button in Vue.js Examples

Leave a Reply

Your email address will not be published. Required fields are marked *