Troubleshooting a Bootstrap 4 Dropdown issue within a Laravel-Vue single page application

Spa.blade.php file

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <title>SPA</title>

    <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i%7COpen+Sans:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">

    <!-- Bootstrap 4.4 -->
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

    <!-- Custom stylesheet -->
    <link rel="stylesheet" href="{{ asset('frontend/style.css') }}">

    <!-- include the site responsive stylesheet -->
    <link rel="stylesheet" href="{{ asset('frontend/css/responsive.css') }}">

</head>
<body>
    <div id="app">
        <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <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>
        </div>
    </div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9feff0efeffaedb1f5ecdfaeb1aea9b1af">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

There are no warnings or errors in the console. It's particularly not working inside the Vue <div id="app"></div> element.

As the CDN links not loaded by the Laravel mix. Is this an issue with Laravel webpack.mix.js?

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

Can anyone suggest how to fix this?

laravelvue.jsbootstrap-4popper.js

Answer №1

It came to my attention that bootstrap.js already loads popper and jquery by default, eliminating the need to import these CDN links again.

/**
 * jQuery and Bootstrap jQuery plugin will be loaded to enable support for
 * JavaScript-based Bootstrap functionalities like modals and tabs. Feel free
 * to adjust this code as needed for your application.
 */
try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

All the necessary dependencies can be loaded with app.js alone.

<script src="{{ asset('js/app.js') }}"></script>

Answer №2

Take a look at this. It's working fine. Make sure to check all the CDNs being used or see if something is missing.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <title>Single Page Application</title>

    
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body>
    <div id="app">
        <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <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>
        </div>
    </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  
</body>
</html>

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

Nuxt.js encounters difficulties in fetching information from the Django Rest Framework API

I am currently developing a Nuxt.js/Vue frontend for my Django Rest Framework backend. Despite specifying permissions to allow non-authenticated users to read-only, I am having trouble successfully loading data from my API. Index.vue import axios from &a ...

vue.jsdjango-rest-frameworknuxt.js

Concealing a VueJs component on specific pages

How can I hide certain components (AppBar & NavigationDrawer) on specific routes in my App.vue, such as /login? I tried including the following code in my NavigationDrawer.vue file, but it disables the component on all routes: <v-navigation-drawer ...

typescriptvue.jsvuetify.js

"Using VueX to update an array of data in the state object

Trying to wrap my head around VueX and its potential here. Currently grappling with the concept of a state object array named currentRoom which ideally should only hold one object at a time. The issue is that instead of replacing the current room data when ...

vue.jsvuexvuejs3

What is the best approach to establish a second relationship with the same model in Laravel?

In my project, I have implemented a many-to-many relationship between two models called User and Community. A user can belong to multiple communities, while a community can have multiple users. To establish this relationship, I created a pivot table named ...

phplaraveleloquenteloquent-relationship

Struggling to retrieve unpredictable data in a Vue.js component

Help! I'm trying to randomly display one of these names in my HTML, but I can't seem to make it work: Vue.component('modal', { template: '#modal-template', data: { items: [ { name: 'Elena' }, { na ...

javascriptvue.jsdata-binding

Having difficulties with vue installation

Whenever I take a break from using certain packages, I typically opt for fresh re-installs. However, when I recently attempted to do a fresh install of Vue.js and vue-cli by running vue init on a new project, I encountered an error stating that Vue was not ...

node.jsnpmvue.jsvuejs2

Select a Button to randomly choose another Button

I am currently developing a dynamic Bootstrap OnePage-Website using HTML, CSS, and JavaScript. The highlight of this website is the Team section where users can book appointments with one of three team members by clicking on a corresponding button beneat ...

javascriptjquerybuttonbootstrap-4

Potential delay in mounting Rails Webpacker + Vue components when webpack-dev-server is not utilized

Production Delay in Rendering Process While using webpack-dev-server, all components are rendered quickly and function flawlessly. However, when running the application solely through rails s in both development and production, I can witness a noticeable ...

ruby-on-railsvue.jsrenderingwebpacker

Enhance your Nuxt.js website with a dual layout design option for each page

As a newcomer to Nuxt.js, I am currently in the process of transitioning a Vue project to Nuxt.js. My goal is to implement two different layouts on a single page: the default layout and a secondary one called the settings bar. In the settings page, I hav ...

vue.jsnuxt.jsvue-router

Error message "Vue CLI project setup encountering ENOENT error: file or directory does not exist"

I'm currently in the process of creating a new Vue.js app, and I've executed the following command: vue create client After that, I opted for the default template: default (babel, eslint) However, during the setup process, it abruptly stops w ...

node.jsdockervue.jsvue-cli

The page refreshes automatically when the search icon is clicked, but the ajax method does not trigger the page reload

Whenever I click on the search-box <a>, the JavaScript is triggered but doesn't execute the ajax method filter_data_guide_specs(). Instead, the page automatically reloads and fails to read the JS code. HTML <div class="form-group"> < ...

javascriptjqueryhtmlajaxlaravel

What is the proper way to implement array mapping within methods in Vue.js?

Is there a way for me to match my array id with my value id and then access the value.name? I have attempted it but couldn't get it right Below is the code I am working with: activity(val) { var act = this.items.map(function (val) { if ( ...

arraysdictionaryvue.js

Exploring the dynamic data loading feature in Vue 3 by fetching data from the server and displaying it using a v-for

I am encountering an issue where I want to display data dynamically from a database using a v-for loop. However, when I attempt to push new data into the array, they show correctly in a console.log() but do not reflect any changes in the template. I have ...

javascriptvue.jsvuejs3v-for

Can you target an 'input' field that is within a component conditionally rendered using 'v-if'?

Imagine this vue.js template code: <div v-if="y===0"> <input ref="textbox">{{textbox}}</input> </div> In the scenario where y is data retrieved asynchronously, Is there a way to direct focus to the 'input' element onc ...

javascripthtmlasynchronousvue.jsfocus

Nuxt: Configure Axios requests to have their origin set based on the current domain

Currently, I am utilizing @nuxtjs/proxy for making proxy requests. The setup in nuxt.config.js is working perfectly fine. nuxt.config.js proxy: { '/api/': { target: 'api.example.com', headers: { 'origin': &apo ...

vue.jsproxyaxiosnuxt.js

The ID attribute of Laravel blade file input is missing

Within my blade file, I have the following line of code: {!! Form::file('motivation', old('motivation'), ['id' => 'inputGroupMotivation', 'class' => 'custom-file-input']) !!} Although I ha ...

phplaravelformshomestead

Storing an empty string in a Laravel database: A step-by-step guide

Below is the code snippet from my controller: public function addEmployer(Request $request) { $validator = UserValidations::validateEmployer($request->all()); if ($validator->fails()) { return response(['status' => false ...

phpjsonstringlaravelnull

Having trouble with the Quasar File Picker feature not functioning as expected in an Android

I am facing issues with selecting a file using this component in an android build. It was functioning properly on the web, but after building for android, it seems to be malfunctioning. <q-file v-model="file" label="Change Profile Picture" u ...

vue.jsquasar-framework

The transparency of an image is being lost when it is used in a modal

I am facing an issue when trying to append a modal that contains only a transparent gif. The problem arises when the transparent background of the gif is not displayed properly. There seems to be no issue with the transparency settings of the gifs themselv ...

htmlcssvue.js

How can we shift some of the value to the initial value in an array? (See visual representation)

In the image below, you can see my array. I am looking to transfer the values highlighted in yellow boxes to the first value, as all these values have the same furniture_id marked with a red circle. Is there a way to accomplish this task? https://i.stack. ...

phparrayslaravel