Creating reusable functions in VueJS that can be accessed globally by all child components

Question

Creating reusable functions in VueJS that can be accessed globally by all child components

Looking for assistance in setting up a universal function that can be accessed across all my Vue files.

For example, when using this code snippet in a Vue file:

@click="ModalShow.show('my-create')"

I have defined the following constant in my app.js:

const Modals = {
    show(screen) {
      alert(screen);
      // additional logic to be executed
    },
};

However, I am encountering the error message:

TypeError: undefined is not an object (evaluating '_ctx.Modals.show')

Any ideas on what might be missing? This is within a Vue project utilizing the composition API.

javascript typescript vue.js vuejs3

Answer 1

Answer №1

To pass functions to child components in Vue, you can utilize the provide/inject feature. Start by providing your function from the main app (or parent component) to the child components.

const Modal = {...}
const app = createApp({})
app.provide('Modal', Modal)

Then, you can inject this function into your component like so:

import { inject } from 'vue'

export default {
  setup() {
    const Modal = inject('Modal')
    return { Modal }
  }
}

You can also achieve this using the script setup syntax:

<script setup>
import { inject } from "vue";
const Modal = inject("Modal");
</script>

Answer 2

To pass functions to child components in Vue, you can utilize the provide/inject feature. Start by providing your function from the main app (or parent component) to the child components.

const Modal = {...}
const app = createApp({})
app.provide('Modal', Modal)

Then, you can inject this function into your component like so:

import { inject } from 'vue'

export default {
  setup() {
    const Modal = inject('Modal')
    return { Modal }
  }
}

You can also achieve this using the script setup syntax:

<script setup>
import { inject } from "vue";
const Modal = inject("Modal");
</script>

Creating reusable functions in VueJS that can be accessed globally by all child components

Answer №1

Similar questions

Is there a way to simulate a KeyboardEvent (DOM_VK_UP) that the browser will process as if it were actually pressed by the user?

Using Angular BehaviorSubject in different routed components always results in null values when accessing with .getValue or .subscribe

Setting up Electron to utilize TypeScript's baseUrl can be achieved by following a few simple steps

What strategies can I use to refactor this controller in Angular 1.5 to make it more concise and efficient

Exploring the possibilities of utilizing JavaScript within TypeScript

When the key code is equal to "enter" (13), the form will be submitted

Getting the current URL in InApp browser on Phonegap 3.0: A quick guide

Error: Route configuration must include a "path" in [vue-router]

Is there a way for me to immediately send data after receiving it?

Unable to retrieve information from req.body, however able to retrieve data from req.params

Building a stunning Vue application with an interactive Kendo diagram

Prevent the browser back button from being used in a web application that requires CLIENT_CERT authentication

MVC4: Exploring the Strategy for Handling Nested Ajax Requests

What sets cross-fetch apart from isomorphic-fetch?

Vue-powered carousel having trouble rotating properly

Tips for composing a hyperlink within a property

Tips for creating a cookie for an alternate website upon launching a new browser tab

The 'userEvent.type' function in React Testing Library is failing to update the input value in a Material UI TextField component that has

Authenticating Users with Laravel and Vue.js

What is the best way to change the value of a div using JavaScript?