What I desire:
Home.vue
<template>
<div>
<p>{{message}}</p>
<ChildComponent/>
</div>
</template>
<script setup>
import { ref, defineComponent } from 'vue';
let message = ref('Hello World!');
let ChildComponent = defineComponent({
name: 'ChildComponent',
template: `<p>{{subMessage}}</p>`,
setup() {
let subMessage = ref('This is a sub-message');
return { subMessage };
}
});
</script>
I had the idea of creating a small dedicated component for one page.
The structure looks good. But unfortunately, it's not functioning as intended.
I aim to avoid creating a new file and using export default.
Additionally, I prefer not to register it globally.
Is there any solution to create a component in this manner?
=====
solution:
app.js
import { createApp } from 'vue'; (X)
import { createApp } from 'vue/dist/vue.esm-bundler.js'; (O)
Success! Why...