how can I use bootstrap instead of tailwind CSS in vue.js welcome component

user_14373656 0
Viewed 4117

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

image

jetstream laravel-mix inertiajs laravel javascript
4 Answers

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.

user_45179640
user_74114130
user_143570680

Though Laravel 8 comes with Tailwind by default, we can still use bootstrap or similar CSS framework for our app.

Navigate to the project folder and install the latest version of the laravel/ui package

composer require laravel/ui

Then install Bootstrap:

php artisan ui bootstrap

Execute the below command to install the auth scaffoldings with Bootstrap:

php artisan ui bootstrap --auth

Then install the bootstrap package and its dependencies from npm:

 npm install

 #development
 npm run dev 

 #production
 npm run production

The above command compiles CSS and JavaScript files from resources/js and resources/sass folder to the public folder.

Automate sass and js changes:

 npm run watch

Now we can define the js and css path and use bootstrap in the blade template:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>
    <h1>Tutorial made by Positronx.io</h1>
</body>
</html>

Hope this works for you!!

user_41981800
Related