Migration vue 2 to vue 3

[jose7445]

Hi!

I'm migrating a project with vue 2 to vue 3. This project has https://bootstrap-vue.org/vue3 and I have to keep it in vue 3.

In https://bootstrap-vue.org/vue3, I saw that I have to put compatConfig: { MODE: 3 } in every component with bootstrap, but I have a console log.

My code:

<template>
  <div>
    <b-button variant="danger" @click="submit">Button</b-button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },

  data() {
    return {};
  },
  compatConfig: { MODE: 3 },
  computed: {},
  methods: {
    submit() {
      console.log("data");
    },
  },
};
</script>

vue.config.js

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: (config) => {
    config.resolve.alias.set("vue", "@vue/compat");

    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => {
        return {
          ...options,
          compilerOptions: {
            compatConfig: {
              MODE: 2,
            },
          },
        };
      });
  },
});

Error in console: Cannot read properties of undefined (reading 'data')

What am I doing wrong? Thanks

[EdmundoDelGusto]

Did you found a solution? Running into the same problem

[jose7445]

No sorry.....I'm working with Vue 2 yet.