Level 104
Why would you want to use Vue and Alpine and Livewire in the same application?
Jul 19, 2022
6
Level 10
Unable to use vue and alpine js together
Hi all,
I would like to use Alpine for the single logic and vue for more complex one but I cannot get vue to render anything inside Alpine (using Breeze):
test component
<x-app-layout>
<div class="py-12">
<example></example><----not rendering
</div>
</x-app-layout>
app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title></title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<!-- Icons -->
<link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script type="module">
import hotwiredTurbo from 'https://cdn.skypack.dev/@hotwired/turbo';
</script>
@livewireStyles
</head>
<body class="font-sans antialiased" id="app">
<div class="min-h-screen bg-white">
@include('layouts.navigation')
<main>
{{ $slot }}
</main>
@include('layouts.footer')
</div>
@stack('modals')
@livewireScripts
<script src="https://cdn.jsdelivr.net/gh/livewire/[email protected]/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>
@stack('scripts')
<script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
@if (session()->has('success'))
<script>
const notyf = new Notyf({dismissible: true})
notyf.success('{{ session('success') }}')
</script>
@endif
<script>
/* Simple Alpine Image Viewer */
document.addEventListener('alpine:init', () => {
Alpine.data('imageViewer', (src = '') => {
return {
imageUrl: src,
refreshUrl() {
this.imageUrl = this.$el.getAttribute("image-url")
},
fileChosen(event) {
this.fileToDataUrl(event, src => this.imageUrl = src)
},
fileToDataUrl(event, callback) {
if (! event.target.files.length) return
let file = event.target.files[0],
reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = e => callback(e.target.result)
},
}
})
})
</script>
</body>
</html>
app.js
require('./bootstrap');
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
import * as Vue from 'vue';
Vue.component('example', require('./components/ExampleComponent.vue').default);
// Initialize Vue
new Vue({
el: '#app'
});
Any idea why please?
Thank you
Level 10
@tykus In my front pages, I have a lot of complex javascript and I find Alpine not very good vs Vue js for this.
Level 104
Level 10
@tykus I cannot, the project was started by someone else with Alpine js. So you are saying we cannot use both?
Ouch! if this is the case.......The project started as simple, the old dev left and now it is becoming more complex, I just cannot use Alpine as it will be a real pain, but all the back end CRUDS have been built in Alpine already. This is really sad. It means that if a project is small and becomes bigger, you are stuck with Alpine js.
Level 104
@User476820 this is simply not possible...
all the back end CRUDS have been built in Alpine already
... do you mean Livewire?
Level 10
@tykus Yes Livewire but all the components are in Alpine.
Please or to participate in this conversation.