Vue.js 2 - Bootstrap 4 - vue.js

Question

I am trying to understand how t use the standard Bootstrap 4 css with a vue.js app..
I set up a simple test project using vue-cli webpack , and copied a standard Bootstrap navbar in a header component.
It displays BUT no links are visible ....
added into package.json
"bootstrap": "4.0.0-beta.3",
added into main.js
import 'bootstrap/dist/css/bootstrap.css'
App.vue
<template>
<div id="app">
<myheader></myheader>
<div class="container">
<router-view></router-view>
</div>
</div>
</template>
<script>
import myheader from '#/components/Header'
export default {
name: 'app',
components: { myheader }
}
</script>
<style>
</style>
Header.vue
<template>
<header id="myheader">
<div class="container">
<nav class="navbar navbar-light bg-faded rounded ">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#containerNavbar" aria-controls="containerNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="containerNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>z
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown04">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</header>
</template>
<script>
import router from '#/router/index'
export default {
name: 'myheader',
router
}
</script>
<style>
</style>
**UPDATE**
I added jQuery and popper.js with npm
and updated my webpack.dev.config
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
I also updated my .eslintrc
globals: {
"$": true,
"jQuery": true
},
Now the Bootstrap navbar collapse runs correctly , but still no horizontal links...

Answer 1

Some of Bootstrap v4 requires a DOM API wrapping library like jQuery to function:
Many of our components require the use of JavaScript to function.
Specifically, they require jQuery, Popper.js, and our own JavaScript
plugins. Place the following s near the end of your pages,
right before the closing tag, to enable them. jQuery must come
first, then Popper.js, and then our JavaScript plugins.
We use jQuery’s slim build, but the full version is also supported.
This is also the case with Bootstrap v3:
Please note that all JavaScript plugins require jQuery to be included,
as shown in the starter template. Consult our bower.json to see which
versions of jQuery are supported.
Although a lot of Bootstrap can get used without any JavaScript, some components like dropdowns, alert dismissing, and other cross-cutting widgets need the extra power that JavaScript provides. You can probably get away without it if you are just using the grid system.
However, if you would rather not explicitly depend on jQuery, you could try Vue Bootstrap which is a Vue plugin that provides most of the Bootstrap components and wraps the things that jQuery is necessary for in a Vue oriented way.

Answer 2

As Bootsrap4 is still in beta (3) I am using in my test the wrong standard classes, I rather should use :
nav class="navbar navbar-dark bg-dark navbar-expand-md">
up and running now ....