Skip to content

Commit

Permalink
Merge pull request #21 from marcoroth/stimulus-vite-helpers
Browse files Browse the repository at this point in the history
Add note about `stimulus-vite-helpers` to README
  • Loading branch information
tonysm authored Feb 22, 2024
2 parents fd7cc38 + 2357436 commit 44a25ac
Showing 1 changed file with 36 additions and 13 deletions.
49 changes: 36 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -140,20 +140,43 @@ Importmap::pin("@hotwired/stimulus-loading", to: "vendor/stimulus-laravel/stimul

### Vite Steps

2. Create a `resources/js/controllers/index.js` and load your controllers from there:
1. Create a `resources/js/controllers/index.js` and chose if you want to register your controllers manually or not:

```js
// This file is auto-generated by `php artisan stimulus:install`
// Run that command whenever you add a new controller or create them with
// `php artisan stimulus:make controllerName`
#### Register controllers manually

```js
// This file is auto-generated by `php artisan stimulus:install`
// Run that command whenever you add a new controller or create them with
// `php artisan stimulus:make controllerName`

import { application } from '../libs/stimulus'
import { application } from '../libs/stimulus'

import HelloController from './hello_controller'
application.register('hello', HelloController)
```
import HelloController from './hello_controller'
application.register('hello', HelloController)
```

#### Register controllers automatically

If you prefer to automatially register your controllers you can use the [`stimulus-vite-helpers`](https://www.npmjs.com/package/stimulus-vite-helpers) NPM package.

```js
// resources/js/controllers/index.js
import { application } from '../libs/stimulus'
import { registerControllers } from 'stimulus-vite-helpers'
3. Create `resources/js/libs/stimulus.js` with the following content:
const controllers = import.meta.glob('./**/*_controller.js', { eager: true })
registerControllers(application, controllers)
```

And install the NPM package:

```bash
npm install stimulus-vite-helpers
```

2. Create `resources/js/libs/stimulus.js` with the following content:

```js
import { Application } from '@hotwired/stimulus'
Expand All @@ -167,19 +190,19 @@ window.Stimulus = application
export { application }
```

4. Create a `resources/js/libs/index.js` file (if it doesn't exist) and add the following line to it:
3. Create a `resources/js/libs/index.js` file (if it doesn't exist) and add the following line to it:
```js
import '../controllers'
```
5. Add the following line to your `resources/js/app.js` file:
4. Add the following line to your `resources/js/app.js` file:
```js
import './libs';
```
6. Finally, add the Stimulus package to NPM:
5. Finally, add the Stimulus package to NPM:
```bash
npm install @hotwired/stimulus
Expand Down

0 comments on commit 44a25ac

Please sign in to comment.