Upgrading to Vue 3: where to put data and methods?

user_14766446 0
Viewed 853

Vue 3 upgrade image from guide

I am following an upgrade guide on how to go from Vue to Vue3. It shows how to handle it if the app is structured like:

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

The problem is that my my app is structured like this:

new Vue({
    el: '#app',
    data() {
        return {
            // initialData
        };
    },
    mounted() {
       // mounted
    },
    methods: {

    }
}

Where do I place the data, mounted, methods, etc to have it work with the new structure in Vue 3?

vuejs3 vue.js
2 Answers

You could import h to render the App component and use your usual options :

import {createApp,h} from 'vue'
...
createApp({
  data() {
        return {
            // initialData
        };
    },
    mounted() {
       // mounted
    },
    methods: {

    },
 render: () => h(App)
})
user_81728570

isn't it the same as just creating an App Component?

const app = createApp(App);
app.mount("#app");

in the App Component

import { defineComponent, onMounted } from "vue";

export default defineComponent({
  name: "App",
  components: {},
  setup() {
    const initialData = "";

    onMounted(() => {
      console.log("mounted");
    });

    const aMethod = () => {
      return null;
    };

    return {
      initialData,
      aMethod
    };
  }
});
</script>
user_1223130
Related