I install jetstream+inertia.js into my laravel project and everything is working perfectly but I need to use bootstrap 5 in only welcome. vue
component so how can I handle it?
My app.js
file;
require('./bootstrap');
// Import modules...
import {createApp, h} from 'vue';
import {App as InertiaApp, plugin as InertiaPlugin} from '@inertiajs/inertia-vue3';
import 'animate.css';
import Toaster from '@meforma/vue-toaster';
import 'alpinejs';
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)
.use(Toaster)
.mount(el);
My app.css
file:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
A potential solution for you is to use both css frameworks concurrently.
You can import and use Bootstrap 5 using npm install bootstrap@next
(more detail here: https://5balloons.info/setting-up-bootstrap-5-workflow-using-laravel-mix-webpack/).
Then to avoid class name collisions you can setup a prefix for your Tailwind classes; in tailwind.config.js
you could add a tw-
prefix by setting the prefix option (more detail here: https://tailwindcss.com/docs/configuration#prefix):
// tailwind.config.js
module.exports = {
prefix: 'tw-',
}
You will have a bit of work updating the existing Tailwind classes with the prefix but it will work.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With