CODEWITHSUNDEEP
vue.js
Dave
Dave

Reputation: 339

Vue CLI Insert Navbar

So I've installed the latest Vue CLI and have a project set up. I am familiar with the concepts of Vue but I need help with structure. Can somebody guide me as to how I could create a navigation bar that would be used across all pages and would contain vue-router links for pages? My first thought was to make a component Navbar.vue and somehow get that into the App.vue so that it is rendered before any <router-view></router-view>. Is this the proper way to do it? Would I instead try to put it inside index.html? I am confused as to how to do this. I am using bootstrap for css.

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>foo.ca</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue:

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'app'
  }
</script>

Upvotes: 1

Views: 854

Answers (1)

Cassio Cabral
Cassio Cabral

Reputation: 2692

You should add into App.vue. Index.html will only render the app.

Remember that router-view will only render the component you set(in the router configs) for the route inside the <router-view></router-view> call. App is just like a layout for your app.

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <!-- Assuming your navbar is looking like bootstrap -->
    <navbar></navbar> 
    <!-- You can move container inside every page instead, if you wish so -->
    <div class="container-fluid">
        <div class="row">
            <router-view></router-view>
        </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'app'
  }
</script>

Upvotes: 2

Related Questions