What sets apart window.app=new Vue({}) versus const app = new Vue({}) when included in app.js within a Vue.js environment?

What exactly is the difference between using window.app and const app in main.js within Vue?

import question from './components/Questions.vue';

Vue.http.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;
window.App = new Vue({
    el: '#app',
    components: { question }
});

as opposed to

import question from './components/Questions.vue';

Vue.http.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;
const app = new Vue({
    el: '#app',
    components: { question }
});

I decided to use window.app because I needed to call a method from the question component using an external jQuery function to execute the Vue method, such as App.component.method(), which worked. But is this considered a safe approach?

Answer №1

Every browser comes with the built-in window object that can be accessed from anywhere in client-side JavaScript.

https://developer.mozilla.org/en-US/docs/Web/API/Window

By using:

window.App = new Vue({
    el: '#app',
    components: { question }
});

You are assigning a variable App to the window object, allowing you to access the Vue instance using App throughout your application.

However, if you use:

const app = new Vue({
    el: '#app',
    components: { question }
});

Then you won't be able to access the app variable elsewhere in your application.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating the state in a React array of objects can be achieved by checking if the specific id already exists in the array. If

In the scenario where the parent component receives an object from the child component via a callback function, I need to verify the existence of an object with a specific rowID. If it exists, the object should be updated with the passed value "val"; oth ...

When working with Angular 2 and Typescript, a common error message that may be encountered is "TypeError

Currently diving into Angular 2 and encountered a stumbling block while attempting to create a service. Despite my efforts in finding a solution, I seem to be missing something crucial. Error: A problem arises in angular2-polyfills.js:1243 with the error ...

Error: The property or method 'xxxx' has not been defined. Please check the component <component v-bind:is="xxxx">

I am developing a multi-page Vue app and steering clear of the SPA approach. Following the recommended "Option 2" from this Vuejs js for multiple pages, not for a single page application In my main layout.blade.php template, I have the following code: &l ...

Troubles encountered with the search bar filter functionality, implementing JS/JQuery within a Laravel blade template

Currently, I have a blade template containing a search bar for filtering purposes. The issue I'm encountering is that the filtering functionality doesn't seem to work as expected after removing Angular from the page entirely. The page is set up ...

Searching for values using keys in Angular

Currently, I am working on a project using Angular where I need to store information based on specific identifiers. To display this information in the Angular application, I am pulling data for different identifiers and showing it on the screen. At the mo ...

Getting a page element by its id with QWebEngineView is a simple task that can be

Is there a way to access the page ElementById in order to input a value? import sys from PyQt5 import QtWebEngineWidgets from PyQt5.QtCore import * from PyQt5.QtGui import QIcon from PyQt5.QtWidgets import * from PyQt5.QtWidgets import QAction from PyQt ...

Choosing Issues

My selectpicker is displaying data outside the dropdown menu before making a selection. The data appears both inside and outside of the dropdown. Can someone please help me identify the issue and guide me on how to fix it? <select class="selectpick ...

Generate a new div element dynamicaly after every 10 elements are added

I am facing the following scenario: I need to dynamically add an UNKNOWN number of checkboxes to a layout component, arranged in columns with 10 checkboxes per layout item. Although I have successfully added all the checkboxes to a single div element, I ...

Develop a "Read More" button using Angular and JavaScript

I am in search of all tags with the class containtText. I want to retrieve those tags which have a value consisting of more than 300 characters and then use continue for the value. However, when I implement this code: <div class=" col-md-12 col-xl-12 c ...

Leveraging global variables within Vuex state management strategy

I have successfully added custom global variables into Vue by injecting them. Here is the code snippet: export default function (props, inject) { inject('models', { register(name) { const model = require(`@/models/${name}. ...

Command for controlling volume in DiscordJS

Despite my efforts, I am struggling to write a command that successfully changes the volume of the music being played. Every time the player and resource variables in the volume() function are empty while the bot is playing the song. What can I do to resol ...

JavaScript animation not functioning properly when height is set to "auto"

Can someone help me figure out why setting the height to "auto" in the code snippet below isn't working as expected? I want the DIV to adjust its size based on the content, but it's not happening. Any ideas on how to fix this issue would be great ...

Tips for accessing hidden field values in a second jsp page

I have a webpage called page1.jsp where I am including hidden fields. Here is the code snippet: <form action = "page2.jsp" method = "post" id = "hiddenValuesForm"> <input type = "hidden" name = "userData" value="" id = "useDataID"> <input t ...

What role does the "deep" parameter serve when declaring a watcher in VueJS?

I recently discovered a feature in Vue.js called watchers while working on my web app. As I was exploring the API documentation, I came across a flag known as deep. This flag caught my attention because it defaults to false. I'm curious to know what s ...

The application experiences a sudden failure when Mongoose is unable to locate the specified item

I am facing an issue where my app crashes when mongoose is unable to find the item. I want to display a 404 error page instead. Here is the code snippet: try { let theBeverage = Product.findOne({ _id: beverageId }); await theBeverage.then((data) ...

Troubleshooting: Clicking the Ajax button yields no response

I’ve looked through all the similar questions and tried multiple solutions, but nothing seems to be working. My goal is to retrieve job postings from my database related to careers. When a user wants to apply for a job, they should click a button which w ...

IntelliJ has removed the connect-flash plugin, preventing me from reinstalling it

Learning node.js is new to me and I encountered a strange issue. While working on implementing login functionality with passportjs, I faced an error where req.flash() was not functioning properly. Oddly enough, it was working fine yesterday when I used it ...

Can you explain the distinction between the onclick(function(){}) and on('click',function(){}) functions in jQuery?

My goal is to dynamically load pages into a specific div using ajax. Here's my HTML code: <ul id="nav" class="nav" style="font-size:12px;"> <li><a href="#" id="m_blink">Tab1</a></li> <li><a href="#" id= ...

A stateless component in React must always return a valid React element or null

I am a beginner with ReactJS and I am facing an issue. My goal is to showcase Hello world using the code snippet provided below, however, I keep encountering this error message: Can someone guide me on what I might be overlooking? The following is the c ...

Display a text field when the onclick event is triggered within a for

Control Panel for($i = 1; $i <= $quantity; $i++){ $data .= '<b style="margin-left:10px;">User ' . $i . '</b>'; $data .= '<div class="form-group" style="padding-top:10px;">'; $data .= ' ...