Alpine.Js - How can i Upgrade

Question

I am using

https://github.com/laravel-frontend-presets/tall

and unable to upgrade the alpine.js version

I tried changing package.json

Changed from

"alpinejs": "^2.8.2",

Changed to

"alpinejs": "^3.1.0"

Edit :

npm install
npm run dev

but alpine.js doesn't work properly

Edited on 25Jun2021 Something like below won't work

<div x-data="{ title: 'Start Here' }">
   <h1 x-text="title"></h1>
</div>

Edited on 26Jun2021 I tried typing

Alpine

in the console and it says

Alpine is not defined

can you define "doesn't work properly"? – Raptor Jun 25 '21 at 03:10 — Raptor, Jun 25 '21 at 03:10
@Raptor Anything alpine won't work. I updated the question. – zaster Jun 25 '21 at 07:42 — zaster, Jun 25 '21 at 07:42
Any errors? Need further debug information – Raptor Jun 25 '21 at 07:43 — Raptor, Jun 25 '21 at 07:43
@raptor I updated the question (Bottom of the question) – zaster Jun 25 '21 at 07:46 — zaster, Jun 25 '21 at 07:46

score 4 · Accepted Answer · edited Jul 15 '21 at 07:47

4

I was struggling with this today.

In the package.json file you will see alpinejs version 2.x something.

Change this to 3.0.0

"alpinejs": "^3.0.0",

Now when you run npm install alpinejs it will upgrade alpine to the latest version for me being "alpinejs": "^3.2.2",.

Finally, you need to open the resources/js/app.js file and add the new alpine stuff

require('./bootstrap');
require('./index');

import Alpine from 'alpinejs'
// Add any extra packages you want to install here
window.Alpine = Alpine

Alpine.start()

edited Jul 15 '21 at 07:47

Dharman

30,962
25
85
135

answered Jul 15 '21 at 07:42

Jakub

1,260
1
13
40

If you want to use Alpine version 3 and above as a single bundle without pulling with CDN, after adding the above step to ``resource/app.js``. One last step remains. You need to run ``npm run dev``or ``yarn dev``. Otherwise, it will not compile and reflect the change in ``resource/app.js`` to your application. – umutyerebakmaz Sep 30 '21 at 06:43

zaster · Answer 2 · 2021-06-26T03:40:46.800

1

I used the CDN and solved the issue.

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

Edit:This is not a proper solution.

edited Jun 26 '21 at 03:40

answered Jun 25 '21 at 08:38

zaster

161
1
4
14

score 1 · Answer 3 · answered Jul 02 '21 at 22:06

If you were importing Alpine V2 from NPM, you will now need to manually call Alpine.start() for V3. This doesn't affect you if you use Alpine's build file or CDN from a <template> tag.

// Before
import 'alpinejs'

// After
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

https://alpinejs.dev/upgrade-guide#need-to-call-alpine-start

score 1 · Answer 4 · answered Aug 24 '21 at 03:30

You will need to first go to your package.json file and change "alpinejs": "^2.0.0" to "^3.0.0." then install alpine using npm install alpinejs. This will automatically download the latest version. Then later run npm install && npm run dev. Then in your resources/js/app.js file, enter the following:

import Alpine from 'alpinejs'

window.Alpine = Alpine
Alpine.start()

I struggled with the same. But this worked for me just fine and I believe it will work for you too!

Alpine.Js - How can i Upgrade

4 Answers4