如何用InertiaJS添加bootstrap-vue模块Laravel Jetstream？

Question

我如何在Laravel上使用bootstrap-vue，使用Laravel 8，Jetstream和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)

我不知道在哪里以及如何添加app.js文件。

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' });

这是我的css.js。在这里添加CSS库。

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

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

Answer 1

正如我从您的配置中看到的那样。您正在将InertiaJS与Vue3一起使用。目前，BootStrap-Vue组件仅适用于Vue2 (info)。因此，您需要首先将InertiaJS从Vue3降级为Vue2。使用npm。

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

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

卸载并重新安装vue和vue-loader似乎很奇怪，但这是正确更新依赖项的最简单方法。

现在你需要放入你的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);
    }
});

app.css不需要任何修改。除非您需要修改和主题Bootstrap，在这种情况下，您必须更改为SASS。