Leveraging global attributes beyond Vue components - Vue 3

Question

Leveraging global attributes beyond Vue components - Vue 3

I have created custom service instances in main.ts

app.config.globalProperties.$service1 = new Service1();
app.config.globalProperties.$service2 = new Service2();

While I can use these instances inside Vue components, I also want to be able to utilize them in utility files.

In Vue 2, this was achieved through:

import Vue from "vue";
Vue.prototype.$service1.someMethod("foo");

The only method that worked for me was exporting the app instance in main.ts and importing it in my utility files, but this solution didn't feel quite right.

So, what is the equivalent of Vue.prototype in Vue 3?

How can I maintain singleton behavior and still access the instances outside of Vue components?

javascript typescript vue.js vuejs3

Answer 1

Answer №1

There is no valid justification for placing this code in main.ts; by organizing it within a module, there is no need to access the service instance from an inappropriate location.

Utilizing modular JS offers numerous advantages, as the service instance can be encapsulated within a module:

export default new Service1();

Subsequently, the service can be imported into each module where it is required:

import service1 from '.../service';

There is no requirement to expose it to all component instances, similar to what is done with Vue.prototype. This practice stems from the old non-modular Vue implementation that relied on a global namespace variable. Presently, exposing global dependencies through app.config.globalProperties is necessary only for elements intended for use in component templates, such as filters.

Answer 2

There is no valid justification for placing this code in main.ts; by organizing it within a module, there is no need to access the service instance from an inappropriate location.

Utilizing modular JS offers numerous advantages, as the service instance can be encapsulated within a module:

export default new Service1();

Subsequently, the service can be imported into each module where it is required:

import service1 from '.../service';

There is no requirement to expose it to all component instances, similar to what is done with Vue.prototype. This practice stems from the old non-modular Vue implementation that relied on a global namespace variable. Presently, exposing global dependencies through app.config.globalProperties is necessary only for elements intended for use in component templates, such as filters.

Leveraging global attributes beyond Vue components - Vue 3

Answer №1

Similar questions

What is the process for incorporating a new task into my HTML/CSS/JavaScript to-do list application when the Enter key is pressed?

validation using ajax and php

Selecting an entire row in a Kendo grid

Add a user to a guild using Discord API

Is it possible to modify @page directive(CSS) values from the code-behind(C#) or JavaScript?

When implementing tooltips in Apexchart's JavaScript, the y-axis second does not appear in the chart

Master the art of displaying complete text when zooming in and elegantly truncating it when zooming out

extract information from local storage using AngularJS

Utilizing vuetify color properties in conjunction with personalized theme modifications

Can you come up with a catchy one-liner for an array that contains all the elements of the arrays that came

Is there a way to retrieve the value of an HTML variable using Selenium?

How can you determine whether the CSS of a <div> is defined in a class or an id using JavaScript/jQuery?

Shifting a div element around the webpage and letting it fall into place if it intersects with another div using plain JavaScript

Implement a mouseenter event to all input elements that have specific names stored in an array, utilizing jQuery

Adding double quotes, where they haven't been added yet

Dynamically including and deleting classes upon clicking using React

Guide to triggering React Material-UI modal and filling it with data from an Ajax request when a button is clicked

The post operation fails to include data in the table

Guide on removing a key from an object in TypeScript

Subscription Code Incrementally Triggering Upon Each Component Load