How to Mount Correctly an In-DOM Root Component Template-CodePudding

I have obviously a misconception of how the vue3 "In-DOM Root Component Template"-mechanism is working. Any hints appreciated!

I modified an example vite project to use "In-DOM Root Component Template".

index.html

    <body>
        <div id="app">
            <div>
                <a href="https://vitejs.dev" target="_blank">
                    <img src="/vite.svg"  alt="Vite logo" />
                </a>
            </div>
            <hello-world msg="Vite   Vue"></hello-world>
        </div>
        <script type="module" src="/src/main.js"></script>
    </body>

main.js

import { createApp } from 'vue'
import './style.css'
import HelloWorld from './components/HelloWorld.vue'

const app = createApp({})

app.component('HelloWorld',HelloWorld)

app.mount('#app')

HelloWorld is the default example component, installed by vite install.

Result: The rendered output is empty, the div#app-innerHtml is not used as Template as expected.

CodePudding user response：

I had an js error here const app = createApp()

Error: Cannot read properties of undefined (reading 'render').

Vue Options should not be undefined. Please replace it with:

const app = createApp({})

You register you component in PascalCase as HelloWorld and use it the same way in HTML. But you should use kebab-case <hello-world>.

There is an explanation in the Vue Docs Using a Component about this:

If you are authoring your templates directly in a DOM (e.g. as the content of a native element), the template will be subject to the browser's native HTML parsing behavior. In such cases, you will need to use kebab-case and explicit closing tags for components

Please pay attention to the explicit closing tags also.

The app works When you fix both problems. Here is the working playground

https://stackblitz.com/edit/vue-n2v2y4?file=public/index.html