CODEWITHSUNDEEP
laravelinertiajslaravel-jetstream
Jaime Zambrana Chacón
Jaime Zambrana Chacón

Reputation: 21

How to add bootstrap-vue module Laravel Jetstream with InertiaJS?

How can I work with bootstrap-vue on Laravel, using Laravel 8, Jetstream and InertiaJS?

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

I don't know where and how to add the app.js file.

app.js:

require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default, 
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

This is my css.js. Here add the CSS libraries.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import 'bootstrap/dist/css/bootstrap.css';
@import 'bootstrap-vue/dist/bootstrap-vue.css';

Upvotes: 2

Views: 2647

Answers (1)

PillFall
PillFall

Reputation: 164

As I can see from your configuration. You are using InertiaJS with Vue3. Right now, BootStrap-Vue components only works with Vue2 (info). So you need first to downgrade InertiaJS from Vue3 to Vue2. With npm

npm uninstall @inertiajs/inertia-vue3 vue @vue/compiler-sfc vue-loader

npm install @inertiajs/inertia-vue vue vue-template-compiler vue-loader

It seems weird to uninstall and reinstall vue and vue-loader, but is the easiest way to properly update the dependencies.

Now you need to put in your app.js.

import Vue from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue';
import BootstrapVue from 'bootstrap-vue';

Vue.use(BootstrapVue);

createInertiaApp({
    resolve: (name) => require(`./Pages/${name}`),
    setup({ el, app, props }) {
        new Vue({
            render: (h) => h(app, props),
        }).$mount(el);
    }
});

The app.css does not need any modification. Unless you need to modify and theme Bootstrap, in that case you must change to SASS.

Upvotes: 1

Related Questions