Utilizing mixins with async components in VueJS

Question

Utilizing mixins with async components in VueJS

Currently, I am utilizing Webpack 2 to import components using a special syntax with require.

Among the over 100 components available, only around 5-10 are used at any given time. These components share some common functionality such as props and lifecycle hooks.

Below is an example of the code structure:

// app.js
...

Vue.component("foo", resolve => {
  require(['./components/foo.vue'], resolve);
});

...

I am trying to apply a mixin to an async component, but I am unsure of how to accomplish this. Applying a Global mixin would affect all components, which is not what I want.

After researching, I came across a now closed feature request, but it did not provide a solution to my specific problem.

javascript vue.js vuejs2

Answer 1

Answer №1

I stumbled upon an unconventional solution, but surprisingly, it does the job:

// helpers.js
export default class Helpers {
   static mixinHelper() {
     return {
       created: function () {
         console.log('mixin hook called');
       }
     }
   }
}

// main.js
Vue.component("main-component", resolve => {
  require(['./components/main.vue'], resolve);
});

// main.vue
<script>
  import Helpers from "helpers";

  export default {
    ...
    mixins: [Helpers.mixinHelper()]
  }
</script>

Nevertheless, I am hopeful for a more refined and graceful approach.

Answer 2

I stumbled upon an unconventional solution, but surprisingly, it does the job:

// helpers.js
export default class Helpers {
   static mixinHelper() {
     return {
       created: function () {
         console.log('mixin hook called');
       }
     }
   }
}

// main.js
Vue.component("main-component", resolve => {
  require(['./components/main.vue'], resolve);
});

// main.vue
<script>
  import Helpers from "helpers";

  export default {
    ...
    mixins: [Helpers.mixinHelper()]
  }
</script>

Nevertheless, I am hopeful for a more refined and graceful approach.

Utilizing mixins with async components in VueJS

Answer №1

Similar questions

Organizing into distinct categories using Angular

Tips for validating a text field in React Material UI depending on the input from another text field

Failure to Trigger jQuery.ajax Success Callback Function

Creating a customized conditional overflow style in _document.js for Next.js

how can one cycle through this demonstration

Using JavaScript to listen for events on all dynamically created li elements

Issue with validating alphanumeric value with multiple regex patterns that allow special characters

Utilize mongoose-delete to bring back items that have been marked for deletion but are still

Custom virtual properties can be set in Mongoose by utilizing the return value in a callback function

Injecting CSS styles into dynamically inserted DOM elements

Collapsible feature in Bootstrap malfunctioning after initial use

Obtaining essential data while facing a redirect situation

A guide on arranging and styling last names in an array in alphabetical order using JavaScript!

Guide to rendering a div class conditionally in a Razor page depending on a variable?

Showing Firestore Data as a map type: Issue encountered - React child cannot be an Object

Triggering an error message when a user attempts to submit an incomplete angular form

The image is being loaded onto the canvas and is being resized

Utilize module.exports to export objects containing callback functions

What is the process for importing DataTables using npm?

Leveraging JavaScript and PHP for fetching image files and generating a downloadable zip folder