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

Question

如何使用 Laravel 8、Jetstream 和 InertiaJS 在 Laravel 上使用 bootstrap-vue？

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 文件。

应用程序.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 （信息） 。 所以你需要先将 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。