Embedding Vue.js project into Laravel Breeze dashboard

Hi! I'm working on a project that uses Laravel as the backend and Vue.js as the front end. I am using Laravel Breeze for authentication. I want to use the dashboard provided by Laravel Breeze by incorporating my Vue.js project within the dashboard for the user to interact. Is there a possible way I can integrate the Vue.js project within the dashboard? Thanks for reading!

Ben Taylor

2 years ago

Level 35

Yes. Just add the js script you use to load Vue and make sure to have an element in your dashboard html to mount Vue to. Vue will then be available inside that element.

If you need more help, maybe you could share the blade layout file used for the dashboard and the js file you load Vue in

ssalam02

2 years ago

Level 1

@Ben Hi, thanks for your response! I should have clarified this earlier, but the backend and frontend are two separate VS Code projects and I'm not sure how to import the Vue.js so that it is visible in the Laravel Breeze dashboard.

Here's how my blade layout file looks like:

<x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        {{ __('Husky Rideshare Dashboard') }}
    </h2>
</x-slot>

<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 text-gray-900">
                {{ __("You're logged in!") }}
            </div>
        </div>
    </div>
</div>

My App.js file looks like this:

import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

I don't know where to start. Thanks for any tips and feedback.

Please or to participate in this conversation.