CODEWITHSUNDEEP
laravel-8alpine.js
zaster
zaster

Reputation: 171

Alpine.Js - How can i Upgrade

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

Upvotes: 5

Views: 1690

Answers (4)

Steven
Steven

Reputation: 51

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!

Upvotes: 1

Jakub
Jakub

Reputation: 1700

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()

Upvotes: 4

lordisp
lordisp

Reputation: 730

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

Upvotes: 1

zaster
zaster

Reputation: 171

I used the CDN and solved the issue.

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

Edit:This is not a proper solution.

Upvotes: 1

Related Questions