title: Vue-Bootstrap doesn't work with Django. How can I start with it correctly?
body: <p>I'm really new to VueJS. I'm trying to use vue-bootstrap instead of usual bootstrap (including jquery).</p>
  
  <p>But it doesn't work at all even though there's no error. All files are loaded.</p>
  
  <p><code>base.html</code></p>
  
  <pre><code>{% load static %}
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
     &lt;link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/&gt;
  &lt;link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  {% block content %}
  {% endblock content %}
  
  &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"&gt;&lt;/script&gt;
  &lt;script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>and I copied this from the example of vue-bootstrap doc
  <a href="https://bootstrap-vue.js.org/docs/components/navbar/" rel="nofollow noreferrer">https://bootstrap-vue.js.org/docs/components/navbar/</a></p>
  
  <p><code>index.html</code></p>
  
  <pre><code>{% extends 'base.html' %}
  
  {% block content %}
  
  &lt;b-navbar toggleable="md" type="dark" variant="info"&gt;
  
    &lt;b-navbar-toggle target="nav_collapse"&gt;&lt;/b-navbar-toggle&gt;
  
    &lt;b-navbar-brand href="#"&gt;NavBar&lt;/b-navbar-brand&gt;
  
    &lt;b-collapse is-nav id="nav_collapse"&gt;
  
  &lt;b-navbar-nav&gt;
    &lt;b-nav-item href="#"&gt;Link&lt;/b-nav-item&gt;
    &lt;b-nav-item href="#" disabled&gt;Disabled&lt;/b-nav-item&gt;
  &lt;/b-navbar-nav&gt;
  
  &lt;!-- Right aligned nav items --&gt;
  &lt;b-navbar-nav class="ml-auto"&gt;
  
    &lt;b-nav-form&gt;
      &lt;b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/&gt;
      &lt;b-button size="sm" class="my-2 my-sm-0" type="submit"&gt;Search&lt;/b-button&gt;
    &lt;/b-nav-form&gt;
  
    &lt;b-nav-item-dropdown text="Lang" right&gt;
      &lt;b-dropdown-item href="#"&gt;EN&lt;/b-dropdown-item&gt;
      &lt;b-dropdown-item href="#"&gt;ES&lt;/b-dropdown-item&gt;
      &lt;b-dropdown-item href="#"&gt;RU&lt;/b-dropdown-item&gt;
      &lt;b-dropdown-item href="#"&gt;FA&lt;/b-dropdown-item&gt;
    &lt;/b-nav-item-dropdown&gt;
  
    &lt;b-nav-item-dropdown right&gt;
      &lt;!-- Using button-content slot --&gt;
      &lt;template slot="button-content"&gt;
        &lt;em&gt;User&lt;/em&gt;
      &lt;/template&gt;
      &lt;b-dropdown-item href="#"&gt;Profile&lt;/b-dropdown-item&gt;
      &lt;b-dropdown-item href="#"&gt;Signout&lt;/b-dropdown-item&gt;
    &lt;/b-nav-item-dropdown&gt;
      &lt;/b-navbar-nav&gt;
  
    &lt;/b-collapse&gt;
  &lt;/b-navbar&gt;
  
  {% endblock content %}
  </code></pre>
  
  <p>But it shows like <a href="https://i.stack.imgur.com/VUWJl.png" rel="nofollow noreferrer">this</a></p>
  
  <p>What am I wrong with it?</p>