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"
}
idk
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.