Mixins don't work after upgrading to vue 3-CodePudding

I'm trying to upgrade to Vue 3, and it looks like mixins don't work anymore.

My component:

<template>
  <div>{{testMethod()}}</div>
</template>

<script>
import testMixin from 'mixins/Test'

export default {
  mixins: [testMixin],
};
</script>

My mixin:

console.log('TEST') // I do see this log in my browser, so I'm guessing the mixin is loaded correctly
const testMixin = {
  methods: {
    testMethod() {
      return 'HELLO'
    },
  },
};

export {
  testMixin,
};

Seems fine to me, but I get TestComponent.vue:2 Uncaught TypeError: _ctx.testMethod is not a function

CodePudding user response：

The issue is in the export syntax, try to export the mixins as default:

export default  testMixin;

import {testMixin} from 'mixins/Test'

CodePudding user response：

I finally found the answer:

Vue 3 added the composition API. While they didn't outright deprecate options API (old syntax), looks like you have to enable it or it won't work.

I added this to webpack/environment.js and everything is working:

environment.plugins.prepend(
    'Define',
    new DefinePlugin({
        __VUE_OPTIONS_API__: true,
        __VUE_PROD_DEVTOOLS__: false
    })
)