Hello,
I'm a junior developer learning about Laravel and Alpine and I ran into a problem with linking an alpine object to my view.
context:
I've imported alpine into my project via the terminal with:
./vendor/bin/sail npm install alpinejs
Then I included the following code in my app.js:
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
In my js folder is also the file home.js, which I included in my home.blade.php using @vite() and registered in the vite.config.js.
I've tested and the home.js is propperly linked and alpine can be logged in the terminal.
problem:
When I make an alpine object like this:
document.addEventListener("alpine:init", () => {
Alpine.data('testing', () => ({
message: 'Hello from Alpine!'
}));
});
And try to use it like this:
<div x-data="testing">
<p x-text="message"></p>
</div>
I get this error: Alpine Expression Error: testing is not defined
Does anyone know the correct way to create, link and use alpine objects in laravel?
Difficult to say based on the information you have provided, however, I believe you are using Alpine.data incorrectly - you need to reference an x-data context in the mark-up. Do you have an Alpine component in your markup where x-data=testing is defined, e.g.
<div x-data="testing">
<p x-text="message"></p>
</div>
I've updated my post to make it more readable. I have tried to call the alpine object via this div:
<div x-data="testing">
<p x-text="message"></p>
</div>
But it doesn't seem to work.
Doesn't seem to work is not very useful; what error message is showing in the browser console?
I would guess that you have an issue relating to the lifecycle; i.e. Alpine is starting before the component has been registered.
Where is the home.js file being imported / linked?
I have home.js linked at the start of the main section of my home.blade.php like this:
@vite('resources/js/home.js')
when I call the data from the alpine object in the div I get these error messages:
Alpine Expression Error: testing is not defined
Alpine Expression Error: message is not defined
something I've also tried is making the alping object in the app.js, bevore starting alpine, like this:
import Alpine from 'alpinejs';
window.Alpine = Alpine;
document.addEventListener("alpine:init", () => {
Alpine.data('testing', () => ({
message: 'Hello from Alpine!'
}));
});
Alpine.start();
But this gives me the same error messages as mentioned before.
OK, let's simplify things here because something is off. This should definitely work
import Alpine from 'alpinejs';
window.Alpine = Alpine;
document.addEventListener("alpine:init", () => {
Alpine.data('testing', () => ({
message: 'Hello from Alpine!'
}));
});
Alpine.start();
Given, you are referencing (i) only the app.js as your scripts entrypoint
@vite(['resources/js/app.js'])
(ii) running npm run dev in your Terminal
(iii) having a data context in the view
<div x-data="testing">
<p x-text="message"></p>
</div>
Can you get to a point where the message is being displayed using Alpine?
I've made a quick text project and your approach of making the alpine object and then starting alping in the app.js workd and the message get's desplayed without errors. The only task at hand is finding a clean way to store the alpine object.
// inport alpine:
import Alpine from 'alpinejs';
window.Alpine = Alpine;
document.addEventListener("alpine:init", () => {
Alpine.data('testing', () => ({
message: 'Hello from Alpine!'
}));
});
console.log('app.js loaded');
Alpine.start();
// vite.config.js
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js', 'resources/js/home.js'],
refresh: true,
}),
tailwindcss(),
],
// laravel view
@extends('layouts.main')
@section('content')
@vite('resources/js/home.js')
<section>
<h1 class="text-2xl">Alpine test</h1>
<div x-data="testing">
<p x-text="message" class="mt-4 text-lg"></p>
</div>
</section>
@endsection
I've made a quick test project and the approach of making the alpine object before starting alpine in the app.js works and the message can be displayed without errors. The problem at hand is to find a clean way to store the alpine object.
// vite.config.js
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js', 'resources/js/home.js'],
refresh: true,
}),
tailwindcss(),
],
// app.js
import Alpine from 'alpinejs';
window.Alpine = Alpine;
document.addEventListener("alpine:init", () => {
Alpine.data('testing', () => ({
message: 'Hello from Alpine!'
}));
});
console.log('app.js loaded');
Alpine.start();
// blade view
<div x-data="testing">
<p x-text="message" class="mt-4 text-lg"></p>
</div>
Please or to participate in this conversation.