Vue Warn: Method "mixins" has type "object" in the component definition

#1

Hi, I have a component named ProjectCard. When it loads I see the following warning in the console:

Vue Warning: Method "mixins" has type "object" in the component definition. Did you reference the function correctly?

I’ve posted what I think is the relevant code from the ProjectCard component this issue. Any thoughts? I can post more code details if helpful but not sure what that would be.

Is this a common warning people see?

Using Vue version: 2.6.11

...
export default {
  name: 'ProjectCard',
  mixins: [utilityMixin, setSidebarComponent, publishFunctions, unpublishFunctions, shellMethodsMixin],
  components:{
...
#2

I’ve never seen that warning before, but I also avoid using mixins. I think you’ll need to inspect your mixins to see how they’re constructed or post them here for us to help. They’re meant to just be objects, so the warning is a bit cryptic.

#3

Thank you, any reason for avoiding mixins ?

#4

I prefer reusable functions or services. Easier to test, less error prone, more composable. Also, less or zero issues if you have to migrate to a newer version of Vue (or possibly a new framework entirely).

Taken from Vue 3’s documentation:

In Vue 2, mixins were the primary tool to abstract parts of component logic into reusable chunks. However, they have a few issues:

  • Mixins are conflict-prone: Since properties from each feature are merged into the same component, you still have to know about every other feature to avoid property name conflicts and for debugging.
  • Reusability is limited: we cannot pass any parameters to the mixin to change its logic which reduces their flexibility in terms of abstracting logic

To address these issues, we added a new way to organize code by logical concerns: the Composition API.

Source: Mixins | Vue.js

1 Like
#5

Thanks James. I personally find mixins awkward to use. And, the ones I’ve constructed are poorly designed. I’d much rather re-design as reusable functions as you mention especially since my code base is so small right now.

I just read through the Vue documentation and didn’t see anything about Vue services. I’m new to the framework and JS in general. Some googling didn’t return much.

Where should I be looking to learn about this?

#6

Services is just a name for something that helps you to complete a task. It’s not specific to Vue, but to programming in general. Sometimes a service helps with background tasks, sometimes they can help as a manager.

For example, you could have a service which you use to downsize and optimise images. Whenever you send an image to this service, it performs a number of tasks and then returns the newly generated image back to you.

If you think about your OS, it consists of thousands of services that do various things to help keep your system running efficiently or help you to perform certain tasks - you can take this same concept and apply it to your JS application.