Getting Bootstrap to work in Vue3

I am starting a project and I have a theme that I purchased from Bootstrap Themes a long time ago, it's working on Bootstrap 4.6 and I am using Laravel 9, Vite, and Vue 3.

Getting the scss of the theme to compile properly isn't an issue at all, the issue is the default bootstrap behavior of things like the navbar collapse that I can't seem to get to work in Vue. The navbar will collapse and show it's button, but when you click on the button to expand the navbar, nothing happens.

I tried importing popper.js in the app.js file and I also tried importing the bootstrap package from npm in the app.js file, but neither of those seems to do anything.

I don't need all of Bootstrap's fancy interactive components (though it would be nice) I just need the navbar to work, and it seems to require some additional JS or jquery that I haven't figured out how to import.

my current app.js:

import './bootstrap';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

My current vite config:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    resolve: {
        alias: {
            'ziggy': '/vendor/tightenco/ziggy/src/js',
            'ziggy-vue': '/vendor/tightenco/ziggy/src/js/vue',
        },
    },
    plugins: [
        laravel({
            input: ['resources/scss/style.default.scss', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

my app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title inertia>{{ config('app.name', 'Laravel') }}</title>

    <!-- Google fonts - Playfair Display-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700">
    <!-- Google fonts - Poppins-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,700">
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
          integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <!-- Scripts -->
    @routes
    @vite(['resources/scss/style.default.scss', 'resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
    @inertiaHead
</head>
<body style="padding-top: 72px;">
@inertia
</body>
</html>

and my Welcome.vue which has the navbar, but will be extracted out into its own component later.

<script setup>

defineProps({
    canLogin: Boolean,
    canRegister: Boolean,
    laravelVersion: String,
    phpVersion: String,
});
</script>

<template>
    <header class="header">
        <!-- Navbar-->
        <nav class="navbar navbar-expand-lg fixed-top shadow navbar-light bg-white">
            <div class="container-fluid">
                <button class="navbar-toggler navbar-toggler-right"
                        type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarCollapse"
                        aria-controls="navbarCollapse"
                        aria-expanded="false"
                        aria-label="Toggle navigation">
                    <i class="fa fa-bars"></i>
                </button>
                <!-- Navbar Collapse -->
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="/">Contact</a></li>
                        <li class="nav-item"><a class="nav-link" href="/">Sign in</a></li>
                        <li class="nav-item"><a class="nav-link" href="/">Sign up</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- /Navbar -->
    </header>
</template>

I'm fairly new to Vue and I just can't seem to figure out how to get the navbar to collapse and expand on mobile layout sizes.

MaverickChan

3 years ago

Level 47

bootstrap has a guide of setup with vite. https://getbootstrap.com/docs/5.3/getting-started/vite/

Please or to participate in this conversation.