I'm having trouble getting Vue-Bootstrap to work with Django. Can anyone provide guidance on how to properly set it up?

Just starting out with VueJS and I wanted to try using vue-bootstrap instead of the traditional bootstrap with jquery.

However, it seems like it's not working at all, even though there are no errors and all files are loaded properly.

base.html

{% load static %}
<!DOCTYPE html>
<html>
...

I followed the example from the vue-bootstrap documentation here:

index.html

{% extends 'base.html' %}
{% block content %}
<b-navbar toggleable="md" type="dark" variant="info">
...

Yet, it looks like this when rendered.

What could possibly be wrong with my setup?

javascriptdjangovue.jsbootstrap-4

Answer №1

The issue stems from not initializing a Vue instance, which is why the functionality is not working correctly.

<script>
  new Vue({ el: '#app' });
</script>

Every Vue application begins by creating a new Vue instance using the Vue function. Refer to the documentation for more information.

Below is an example of how to implement it correctly:

<html>
  <head>
    <link
      type="text/css"
      rel="stylesheet"
      href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"
    />
    <link
      type="text/css"
      rel="stylesheet"
      href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
    />
  </head>
  <body>
   
    <div id="app">
        <b-navbar toggleable="md" type="dark" variant="info">

            <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
          
            <b-navbar-brand href="#">NavBar</b-navbar-brand>
          
            <b-collapse is-nav id="nav_collapse">
          
          <b-navbar-nav>
            <b-nav-item href="#">Link</b-nav-item>
            <b-nav-item href="#" disabled>Disabled</b-nav-item>
          </b-navbar-nav>
          
          <!-- Right aligned nav items -->
          <b-navbar-nav class="ml-auto">
          
            <b-nav-form>
              <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
              <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
            </b-nav-form>
          
            <b-nav-item-dropdown text="Lang" right>
              <b-dropdown-item href="#">EN</b-dropdown-item>
              <b-dropdown-item href="#">ES</b-dropdown-item>
              <b-dropdown-item href="#">RU</b-dropdown-item>
              <b-dropdown-item href="#">FA</b-dropdown-item>
            </b-nav-item-dropdown>
          
            <b-nav-item-dropdown right>
              <template slot="button-content">
                <em>User</em>
              </template>
              <b-dropdown-item href="#">Profile</b-dropdown-item>
              <b-dropdown-item href="#">Signout</b-dropdown-item>
            </b-nav-item-dropdown>
              </b-navbar-nav>
          
            </b-collapse>
          </b-navbar>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2c4c7d7f2809c879c8083">[email protected]</a>/dist/vue.js"></script>
    <script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
    <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

    <script>
      new Vue({ el: '#app' });
    </script>
  </body>
</html>

It's worth noting that using protocol-relative URLs may not work in all environments, so ensure to specify the protocol (e.g., https) when importing scripts and stylesheets.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to attach a model to an Angular directive?

Currently, I am implementing angular's typeahead functionality using the following resource: I have created a directive with the following template: <div> <input type="text" ng-model="user.selected" placeholder="Ty ...

javascriptangularjsangular-ui-typeahead

What is the best way to filter an array of objects using an array of strings?

Suppose we have an array filled with objects : people = [ {id: "1", name: "abc", gender: "m", age:"15", country:"USA" }, {id: "2", name: "def", gender: "m", age:"2 ...

javascriptarraysobject

Having trouble processing images in multi-file components with Vue and TypeScript

Recently, I reorganized my component setup by implementing a multi-file structure: src/components/ui/navbar/ Navbar.component.ts navbar.html navbar.scss Within the navbar.html file, there was an issue with a base64-encoded image <img /> ...

imagetypescriptvue.jswebpack

The detailed record of this run can be accessed at:

npm ERR! code ENOTEMPTY npm ERR! syscall rename npm ERR! path /usr/local/lib/node_modules/expo-cli npm ERR! dest /usr/local/lib/node_modules/.expo-cli-dKBr48UN npm ERR! errno -39 npm ERR! ENOTEMPTY: The directory cannot be renamed because ...

javascriptnode.jsreactjslinuxreact-native

Developing JavaScript functionality to manage multiple radio buttons that should be hidden after being selected

I am currently in the process of building a comprehensive form that includes numerous radio buttons. My goal is to present one question at a time, which means using JavaScript to hide the respective div after a radio button has been clicked. While I have ...

javascriptjqueryhtml

The error "navigator.permissions.query is not a defined object" is encountered in the evaluation

Whenever I try to access my website on an iPhone 7, I encounter a frustrating error. The main screen loads without any issues, but as soon as I click on something, a white bank screen appears. I believe this piece of code might be the cause: useEffect( ...

javascriptiosiphonereactjspermissions

Navigating to a specific location and determining its boundaries using the selected location feature in react-leaflet

Is there a way to dynamically zoom in on a particular location or fly to that location when it is selected from a list of cities in a dropdown menu, and then get the bounds around that location? I have been trying to implement this functionality based on t ...

javascriptreactjsleafletmapsreact-leaflet

Retrieve values from a multi-level nested object by using square bracket notation for each level

I am in need of a config object to display nested data. Check out the demo code for reference In the code, accessing "customer.something" is essential. There can be multiple levels of nesting, which the grid handles with field='customer.som ...

javascriptangulartypescriptej2-syncfusion

The correct way to properly define an eventEmitter in JavaScript

I am looking to create a helper object with a function that will trigger on each "orientationchange" event of the window. Below is my code, but it is not working correctly. Can you help me define the onRotate function properly so that I can use it globall ...

javascripteventemitter

Steps for incorporating Buttons into Three.Js interface

After implementing the code from the provided example webxr_ar_hittest, I successfully placed an object in my room. Now, I want to enable the ability to rotate the object with the press of a button. However, I haven't been able to find details on how ...

javascriptthree.jsaugmented-realitywebxr

What is the process for inserting a key value pair into a JSON object?

I am looking to enhance my JSON data by including a key-value pair in each object within the array. https://i.sstatic.net/48ptf.png My goal is to insert a key-value pair into every object in the students array. ...

javascriptjson

Using three.js to create a rotating analog clock in Javascript

I currently have a traditional clock displayed in my setting that I want to synchronize with the current time. I am able to keep the clock running by calculating each hand's rotation every second, but I am encountering peculiar issues with the minute ...

javascriptrotationthree.jsradians

'jQuery' is not recognized as defined, error no-undef

I am currently working on a file that utilizes jQuery for testing purposes: (function($) { "use strict"; // Start of use strict // Configure tooltips for collapsed side navigation $('.navbar-sidenav [data-toggle="tooltip"]').tooltip({ ...

javascriptjqueryreactjsnpmcreate-react-app

Vue-resource interceptor for handling authorization headers

I have been working on connecting a VueJS frontend application (vue-cli webpack template) to my Laravel API. Successfully, I am able to receive a response from the API using vue-resource by supplying the correct auth token as shown below: methods: { ...

vue.jsvue-resource

Utilize the outcome of one variable to label another variable

I am attempting to generate a variable name by using the id value of another variable. Here is my approach: Upon clicking one of the 4 tables, I get the id of the table. For instance, let's say it's 676. Next, I want to create a variable using ...

javascriptjqueryarrays

Vue.js: The `ref` attribute is missing in the child component

I've encountered an issue with my custom component, named Input. While all attributes passed to this component are inherited successfully, the ref attribute seems to be consistently omitted. The ref attribute is crucial for setting focus on the eleme ...

vue.jsinheritanceattributes

Experiencing the issue of receiving unexpected commas following a div

Here is the code written in TypeScript for creating an HTML table that displays items from nested objects. The code is functional, but there seems to be an issue with extra commas being printed which are not part of any specific line being executed. im ...

javascripthtmlangulartypescripthtml-table

Inquiring about how to retrieve data from a table using option select drop-downs

I have a pricing table that is dependent on specific criteria, and I am familiar with using HTML tags for this purpose. I am interested in finding the most efficient way to retrieve the cost per square foot based on three dropdown box selections. These sel ...

javascripthtmlcss

Showing nested routes component information - Angular

I am working on a project that includes the following components: TodosComponent (path: './todos/'): displaying <p>TODO WORKS</p> AddTodosComponent (path: './todos/add'): showing <p>ADD TODO WORKS</p> DeleteTo ...

javascriptangulartypescript

Is it possible to manually provide jwplayer with the segments of a video feed?

In brief, my current project involves developing a plugin to retrieve segments from an HLS playlist hosted on my personal server (using WebSocket) instead of relying on a content delivery network. While I've successfully replaced the XHR component, I ...

javascriptpluginsjwplayer