Vue-next: Mixins for setup method

Created on 15 Aug 2020  路  3Comments  路  Source: vuejs/vue-next

What problem does this feature solve?

Is there ability to use common mixin file with setup method for several components?

// mixin.js

export default {
    setup: => { console.log(123); }
}

// component.js

import mixin from 'mixin.js';
export default {
    mixins: [mixin], // <- "setup is not available, but data-property or any other methods work"
}

What does the proposed API look like?

idk

All 3 comments

I don't think there is a way but it wouldn't make sense because
instead you could create a function that returns
refs and methods and call it inside setup. This way you get typings and things are explicit.
For global mixins you can still use the options api

mixins accepts an array of partial component's options so you should wrap your fn in the methods object in order to be correctly merged:

export default {
   methods: {
     setup() { console.log(123); }
  }
}

other alternatives:

// shared

export const foo = () => {}
export const bar  = () => {}

// component

import { foo, bar } from 'path/to/shared'

export default {
   methods: {
     foo,
     bar,
  }
}

// or put it in the setup hook

export default {
  setup() {
    return {
      foo,
      bar,
    }
  }
}

Vue 2 docs about mixins - https://vuejs.org/v2/guide/mixins.html

This is intentional. mixins is a part of the Options API and setup is part of the Composition API. If you are using the Composition API, all logic composition should be done using Composition API.

Was this page helpful?
0 / 5 - 0 ratings