nascent-africa / jetstrap

A Laravel 8 package to easily switch TailwindCSS resources generated by Laravel Jetstream and Breeze to Bootstrap 4.
https://github.com/nascent-africa/jetstrap
MIT License
709 stars 120 forks source link

laravel 10 support with php 8 #99

Open rajatvermaiam opened 1 year ago

rajatvermaiam commented 1 year ago

i cant install on laravel 10 project.

Raicon47 commented 1 year ago

same issue

nudecode commented 1 year ago

same issue

DDSameera commented 1 year ago

same issue

jordihuertas commented 1 year ago

I spent a few days fighting with this and in the end I decided to integrate it on my own. The only problem is if you want to use jetstream's base components or view the template as if it were bootstrap. For that you will have to manually change the default pages and components so that they have the bootstrap classes. To use bootstrap you will also need propper (for dropdowns, popovers and other components) and sass.

The steps would be:

  1. Install popper npm install bootstrap @popperjs/core

  2. Install sass npm install sass --save-dev

  3. Rename the resources css folder and file: resources/css by resources/scss and resources/scss/app.css by resources/scss/app.scss

  4. Change the vite-config config

    // vite.config.js
    export default defineConfig({
     plugins: [
         laravel({
             input: ['resources/scss/app.scss', 'resources/js/app.js'],
             [...]
         }),
     ],
     resolve: {
         aliases: {
             '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
         }
     }
    });
  5. Import bootstrap styles

    // resources/scss/app.scss
    @import "~bootstrap/scss/bootstrap";
  6. Import bootstrap js

    // resources/js/app.js
    import * as bootstrap from 'bootstrap';
  7. Modify the blade to import it, for example, the welcome page

    <!-- resources/views/welcome.blade.php -->
    <head>
     @vite(['resources/scss/app.scss', 'resources/js/app.js'])
    </head>
  8. Compile it with npm run build

  9. Test it with some bootstrap html example like https://getbootstrap.com/docs/5.3/examples/grid/

This should do the work.

Raicon47 commented 1 year ago

thank you

IAmShafqatAli commented 1 year ago

[https://github.com/IAmShafqatAli/boostrap5-inertia-ssr]()

You can try this repo. I used jet strap with Laravel 9 and upgraded to Laravel 10. I am using it in my project and it seems to be doing the trick for me. Feel free to pull it and modify it as your need.

Jimmy2004S commented 1 year ago

Your requirements could not be resolved to an installable set of packages.

Problem 1

You can also try re-running composer require with an explicit version constraint, e.g. "composer require nascent-africa/jetstrap:*" to figure out if any version is installable, or "composer require nascent-africa/jetstrap:^2.1" if you know which you need.

Installation failed, reverting ./composer.json and ./composer.lock to their original content.

Gupyzer0 commented 1 year ago

I spent a few days fighting with this and in the end I decided to integrate it on my own. The only problem is if you want to use jetstream's base components or view the template as if it were bootstrap. For that you will have to manually change the default pages and components so that they have the bootstrap classes. To use bootstrap you will also need propper (for dropdowns, popovers and other components) and sass.

The steps would be:

  1. Install popper npm install bootstrap @popperjs/core
  2. Install sass npm install sass --save-dev
  3. Rename the resources css folder and file: resources/css by resources/scss and resources/scss/app.css by resources/scss/app.scss
  4. Change the vite-config config
// vite.config.js
export default defineConfig({
     plugins: [
         laravel({
             input: ['resources/scss/app.scss', 'resources/js/app.js'],
             [...]
         }),
     ],
     resolve: {
         aliases: {
             '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
         }
     }
});
  1. Import bootstrap styles
// resources/scss/app.scss
@import "~bootstrap/scss/bootstrap";
  1. Import bootstrap js
// resources/js/app.js
import * as bootstrap from 'bootstrap';
  1. Modify the blade to import it, for example, the welcome page
<!-- resources/views/welcome.blade.php -->
<head>
     @vite(['resources/scss/app.scss', 'resources/js/app.js'])
</head>
  1. Compile it with npm run build
  2. Test it with some bootstrap html example like https://getbootstrap.com/docs/5.3/examples/grid/

This should do the work.

My two cents on this.

If you get this error Error: Dynamic require of "path" is not supported

Import path.resolve this way import {resolve} from 'path'

So you have '~bootstrap': resolve(__dirname, 'node_modules/bootstrap')

carlx1101 commented 1 year ago

I spent a few days fighting with this and in the end I decided to integrate it on my own. The only problem is if you want to use jetstream's base components or view the template as if it were bootstrap. For that you will have to manually change the default pages and components so that they have the bootstrap classes. To use bootstrap you will also need propper (for dropdowns, popovers and other components) and sass. The steps would be:

  1. Install popper npm install bootstrap @popperjs/core
  2. Install sass npm install sass --save-dev
  3. Rename the resources css folder and file: resources/css by resources/scss and resources/scss/app.css by resources/scss/app.scss
  4. Change the vite-config config
// vite.config.js
export default defineConfig({
     plugins: [
         laravel({
             input: ['resources/scss/app.scss', 'resources/js/app.js'],
             [...]
         }),
     ],
     resolve: {
         aliases: {
             '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
         }
     }
});
  1. Import bootstrap styles
// resources/scss/app.scss
@import "~bootstrap/scss/bootstrap";
  1. Import bootstrap js
// resources/js/app.js
import * as bootstrap from 'bootstrap';
  1. Modify the blade to import it, for example, the welcome page
<!-- resources/views/welcome.blade.php -->
<head>
     @vite(['resources/scss/app.scss', 'resources/js/app.js'])
</head>
  1. Compile it with npm run build
  2. Test it with some bootstrap html example like https://getbootstrap.com/docs/5.3/examples/grid/

This should do the work.

My two cents on this.

If you get this error Error: Dynamic require of "path" is not supported

Import path.resolve this way import {resolve} from 'path'

So you have '~bootstrap': resolve(__dirname, 'node_modules/bootstrap')

After doing all these two quote, i have face a problem ( i have run npm i boostrap)

[vite:css] [sass] Can't find stylesheet to import. ╷ 9 │ @import "~bootstrap/scss/bootstrap"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ resources\scss\app.scss 9:9 root stylesheet

m1ge0 commented 1 year ago

Hey everyone,

if somebody is interessted, i build an update of this package which for now only supports Livewire. It will swap the Tailwind views with some Bootstrap views and works with laravel 10 with vite.

https://github.com/m1ge0/bootsjet

Feedback is very appreciated...

alvaromoli commented 11 months ago

I spent a few days fighting with this and in the end I decided to integrate it on my own. The only problem is if you want to use jetstream's base components or view the template as if it were bootstrap. For that you will have to manually change the default pages and components so that they have the bootstrap classes. To use bootstrap you will also need propper (for dropdowns, popovers and other components) and sass. The steps would be:

  1. Install popper npm install bootstrap @popperjs/core
  2. Install sass npm install sass --save-dev
  3. Rename the resources css folder and file: resources/css by resources/scss and resources/scss/app.css by resources/scss/app.scss
  4. Change the vite-config config
// vite.config.js
export default defineConfig({
     plugins: [
         laravel({
             input: ['resources/scss/app.scss', 'resources/js/app.js'],
             [...]
         }),
     ],
     resolve: {
         aliases: {
             '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
         }
     }
});
  1. Import bootstrap styles
// resources/scss/app.scss
@import "~bootstrap/scss/bootstrap";
  1. Import bootstrap js
// resources/js/app.js
import * as bootstrap from 'bootstrap';
  1. Modify the blade to import it, for example, the welcome page
<!-- resources/views/welcome.blade.php -->
<head>
     @vite(['resources/scss/app.scss', 'resources/js/app.js'])
</head>
  1. Compile it with npm run build
  2. Test it with some bootstrap html example like https://getbootstrap.com/docs/5.3/examples/grid/

This should do the work.

My two cents on this. If you get this error Error: Dynamic require of "path" is not supported Import path.resolve this way import {resolve} from 'path' So you have '~bootstrap': resolve(__dirname, 'node_modules/bootstrap')

After doing all these two quote, i have face a problem ( i have run npm i boostrap)

[vite:css] [sass] Can't find stylesheet to import. ╷ 9 │ @import "~bootstrap/scss/bootstrap"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ resources\scss\app.scss 9:9 root stylesheet

Try replacing it with @import "node_modules/bootstrap/scss/bootstrap";

Amjedashamiri commented 5 months ago

thank you for all