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>

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 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.

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.

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?