Vuejs Single-file-component not Rendered in Page

Question

No errors in browser, Webpack compiles successfully, but the "hello from dashboard" doesn't show up in the page.

I'm using Vue v2.6

main.js

import Vue from 'vue'

Vue.component('dashboard', require('@comp/dashboard.vue').default);

const app = require('@/App.vue').default; // this app component works fine

import "./css/app.css"

new Vue({
  render: h => h(app) // this app component works fine
}).$mount('#app')

dashboard.vue

<template>
  <div>
    Hello from dashboard
  </div>
</template>

<script>
export default {
  name: "dashboard"
}
</script>

index.html

<body>
<div id="app">
    <dashboard></dashboard>
</div>
</body>

This is the rendered HTML from the browser, However, "hello from dashboard" is not there :(

<body>
<div id="app">
    <dashboard></dashboard>
</div>
</body>

i see nothing wrong in your code can you make sandbox for demo.. — Vishnu Bhadoriya
– Vishnu Bhadoriya, Commented Aug 25, 2021 at 12:40
didnt know a way for online sandbox with bundles and stuff, it is here github.com/Z3yko/vue-app, many thanks — manhoty
– manhoty, Commented Aug 25, 2021 at 13:06
@VishnuBhadoriya You missed the HTML code, it´s wrong to put any kind of code into the <div id="app">, because it will be replaced. So with <dashboard>, that´s why it dont show. — StevenSiebert
– StevenSiebert, Commented Aug 25, 2021 at 19:03

grovskiy · Accepted Answer · 2021-09-03 09:00:08Z

2

You have the root file "App.vue" mounted in the div id = "app", so the "dashboard" needs to be added to App.vue to see its contents.

// App.vue
<template>
  <dashboard />
</template>

<script>
  export default {};
</script>

<style scoped></style>

In this code, you have connected a component globally, which will be available in App.vue or another child component

Vue.component('dashboard', require('@comp/dashboard.vue').default);

edited Sep 3, 2021 at 9:00

answered Aug 25, 2021 at 12:48

grovskiy

8086 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

manhoty Over a year ago

Right that's my point, "globaly" so I should be able to use it in index.html also right? why is that not working, and Im registering it to the instance not to App component

Vishnu Bhadoriya Over a year ago

you should not use anything inside div#app it will be replaced

grovskiy Over a year ago

@manhoty index.html acts as a start file, in which no application development is carried out, so all the logic and architecture of the application takes place in the src/ folder next to the root App.vue document. Perhaps you want to include vue as a library, then you can use components in html files. For example, how is it herel

alexkarpen · Accepted Answer · 2021-08-25 12:47:30Z

0

I assume its the path you are missing so i added a / before comp. Because you stated the App.vue works.

Vue.component('dashboard', require('@/comp/dashboard.vue').default);

answered Aug 25, 2021 at 12:47

alexkarpen

911 silver badge6 bronze badges

1 Comment

manhoty Over a year ago

thnaks but no im setting the alias this way and it's resolving

Collectives™ on Stack Overflow

Vuejs Single-file-component not Rendered in Page

2 Answers 2

You have the root file "App.vue" mounted in the div id = "app", so the "dashboard" needs to be added to App.vue to see its contents.

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

You have the root file "App.vue" mounted in the div id = "app", so the "dashboard" needs to be added to App.vue to see its contents.

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related