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

【问题标题】：How to add bootstrap-vue module Laravel Jetstream with InertiaJS?如何使用 InertiaJS 添加 bootstrap-vue 模块 Laravel Jetstream？
【发布时间】：2021-06-18 16:22:59
【问题描述】：

如何使用 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 文件。

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

【问题讨论】：

标签： laravel inertiajs jetstream

【解决方案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。

【讨论】：