Is Bootstrap-Vue broken?
Question
This is a followup question of my last question , and again, I am trying to get Vue and Bootstrap to work in a minimalistic setup ontop of Node.js. For this, I am not using any package manager or CDN, but instead I have all the required files available next to the webpage.
Now, instead of using Bootsrap and Vue I am using the Bootstrap-Vue library with Vue, but I didn't get it to work no matter what. All Bootstrap-Vue elements would only display as plain text, so I started working my way back until I had the simplest setup imaginable:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
</head>
<body>
<div class="text-center my-3">
<b-btn v-b-popover.hover="'I am popover content!'" title="Popover Title">Hover Me</b-btn>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
</body>
</html>
But even this super simple webpage is not being displayed correctly. Testing with native Bootstrap components does work, but all the Bootstrap-Vue stuff does not. Vue is being excecuted and my Debug Console tells me that it successfully requested all script files needed.
It should be noted that the webpage looks the same, regardless of me requesting it via Node.js or manually opening the document.
So, what is the problem?
1 answers
solution1
4 ACCPTED 2017-12-01 12:33:51
Are you applying Vue to your template?
new Vue({ el: '#app' });
<link href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css" rel="stylesheet" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" /> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> <div id="app" class="text-center my-3"> <b-btn vb-popover.hover="'I am popover content!'" title="Popover Title">Hover Me</b-btn> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.