Expanding worldwide mixin in Nuxt.js

Question

Expanding worldwide mixin in Nuxt.js

Currently, I am working with Nuxtjs version 2.15.7 and have a mixin file structured like this:

utils.js :

import Vue from "vue"

if (!Vue.__utils__) {
  Vue.__utils__ = true
  Vue.mixin({ 
    data(){
      return{
         ...
      }
    },
    methods:{
      ...
    }
  })
}

Now, I am looking to create another global mixin that builds upon my existing utils.js file. Here is an example of what I want to achieve:

utils-another.js :

import utils from '@/plugins/mixins/utils.js'
import Vue from "vue"

if (!Vue.__utils__) {
  Vue.__utils__ = true
  Vue.mixin({ 
    // ... codes from utils.js
    data(){
      return{
         ...
      }
    },
    methods:{
      ...
    }
  })
}

I need to be able to choose between using utils.js or utils-another.js based on a specific environment property. How should I go about implementing this without duplicating all the code from utils.js into utils-another.js for easier maintenance?

javascript vue.js vuejs2 nuxt.js

Answer 1

Answer №1

You can organize your mixin code like this

// customMixin1.js
export default {
  data() {
    return {
      //...
    }
  },
  methods: {
    //...
  }
}

// customMixin2.js
export default {
  data() {
    return {
      //...
    }
  },
}

This allows you to create two global mixins.

// utils-custom.js:
import customMixin1 from '@/plugins/mixins/customMixin1.js'
import customMixin2 from '@/plugins/mixins/customMixin2.js'
import Vue from "vue"

if (!Vue.__custom__) {
  Vue.__custom__ = true
  Vue.mixin({
    mixins: [customMixin1, customMixin2], // custom.js codes
  })
}

Alternatively, you can use just one mixin

// utils-custom.js:
import customMixin1 from '@/plugins/mixins/customMixin1.js'
import Vue from "vue"

if (!Vue.__custom__) {
  Vue.__custom__ = true
  Vue.mixin({
    mixins: [customMixin1], // custom.js codes
  })
}

Exercise caution when using global mixins, as they impact every Vue instance created, including third party components.

Answer 2

You can organize your mixin code like this

// customMixin1.js
export default {
  data() {
    return {
      //...
    }
  },
  methods: {
    //...
  }
}

// customMixin2.js
export default {
  data() {
    return {
      //...
    }
  },
}

This allows you to create two global mixins.

// utils-custom.js:
import customMixin1 from '@/plugins/mixins/customMixin1.js'
import customMixin2 from '@/plugins/mixins/customMixin2.js'
import Vue from "vue"

if (!Vue.__custom__) {
  Vue.__custom__ = true
  Vue.mixin({
    mixins: [customMixin1, customMixin2], // custom.js codes
  })
}

Alternatively, you can use just one mixin

// utils-custom.js:
import customMixin1 from '@/plugins/mixins/customMixin1.js'
import Vue from "vue"

if (!Vue.__custom__) {
  Vue.__custom__ = true
  Vue.mixin({
    mixins: [customMixin1], // custom.js codes
  })
}

Exercise caution when using global mixins, as they impact every Vue instance created, including third party components.

Expanding worldwide mixin in Nuxt.js

Answer №1

You can organize your mixin code like this

Similar questions

Issue arises when child component fails to receive updated props from parent component after data changes in parent component

Issues with data within a Vue.js pagination component for Bootstrap tables

Struggling to integrate a JavaScript sdk with an Angular2 application due to missing dependencies

Creating a captivating animation for a social media like button with CSS

Using NodeJS and Express together with Ajax techniques

Update the ajax request from jquery to axios and configure the xhrFields

Initiating, halting, and rejuvenating a timer in JavaScript

Steps for making a cookie in Node.js using Socket.IO

The dynamic styles set by CSS/JavaScript are not being successfully implemented once the Ajax data is retrieved

The functionality of Bootstrap's Modal feature seems to be malfunctioning

How can I pass an argument to Node within a package.json script instead of the script itself?

Using Vue.js to conditionally render content based on changes in a variable

What is the process for inserting text or letters into a checkbox using Material Ui?

"Effortlessly Arrange Multiple Gridview Rows Using Checkbox Selection in jQuery Drag and Drop

Is it necessary to compile Jade templates only once?

Having trouble getting the timer function to execute upon page load in JavaScript

It requires two clicks on the button for the Vue and Pinia store to update

White border appears when hovering over MUI TextField

Filtering an Array in VueJS Based on User Input

Looking to update a specific element in an array on an hourly basis?