Calling a component from index.html in Vue.js

Question

In my app there's no App.vue component assigned to the #app element. Instead, in my index.html, I have a <router-view> element which displays some Home.vue component by default or whatever other component depending on the route.

However I want to display a certain component (informing about user online status) at all times regardless of the current route. But how can I achieve this if it's not possible to call a component from index.html? Or is it possible?

index.html:

<!DOCTYPE html>
<html lang="en">
  <head><meta charset="utf-8"></head>
  <body>
    <div id="app">
      <!-- Component handling user status (connected / not connected) would go here -->
      <router-view></router-view>
    </div>
    <script src="dist/build.js"></script>
  </body>
</html>

Can you provide an sample example in JSFiddle?

Sajib Khan
– Sajib Khan

2018-10-06 18:45:12 +00:00
Commented Oct 6, 2018 at 18:45 — Sajib Khan
– Sajib Khan, Commented Oct 6, 2018 at 18:45

tony19 · Accepted Answer · 2018-10-07 09:47:50Z

1

Place your component above <router-view> (where the comment indicates ):

<div id="app">
  <user-presence-status></user-presence-status>
  <router-view></router-view>
</div>

Be sure to include the component definition when mounting the root component, as shown in the following example:

import UserPresenceStatus from '@/components/UserPresenceStatus';

new Vue({
  el: '#app',
  compnents: {
    UserPresenceStatus
  }
);

demo

answered Oct 7, 2018 at 9:47

tony19

140k24 gold badges281 silver badges354 bronze badges

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

Collectives™ on Stack Overflow

Calling a component from index.html in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related