Laravel - Vue component doesn´t load
Question
I have a website with Laravel and Vue. I am trying to load a Vue component inside a Blade file, but something is wrong, it doesn't load the component.
app.js
Vue.component('people-form-component', require('./components/people/FormComponent.vue'));
const app = new Vue({
el: '#app',
});
Index ( layouts/base.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>{{ config('app.name', 'Laravel') }}</title>
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
@yield('content')
</div>
</body>
</html>
Blade
@extends('layouts.base')
<people-form-component></people-form-component>
Vue component
<template>
<section class="flex justify-center items-center w-full bg-blue-400">
<div class="w-1/2 bg-white rounded shadow-2xl p-8 m-6">
<h1 class="block w-full text-center text-gray-800 text-2xl font-bold mb-6">People Form</h1>
<form action="/" method="post">
<div class="flex flex-col mb-4">
<label class="mb-2 font-bold text-lg text-gray-900" for="name">Name</label>
<input class="border py-2 px-3 text-grey-800" type="text" name="name" id="name">
</div>
<div class="flex flex-col mb-4">
<label class="mb-2 font-bold text-lg text-gray-900" for="last_name">Last Name</label>
<input class="border py-2 px-3 text-grey-800" type="text" name="last_name" id="last_name">
</div>
<div class="flex flex-col mb-4">
<label class="mb-2 font-bold text-lg text-gray-900" for="age">Age</label>
<input class="border py-2 px-3 text-grey-800" type="age" name="age" id="age">
</div>
<div class="flex flex-col mb-4">
<label class="mb-2 font-bold text-lg text-gray-900" for="dni">DNI</label>
<input class="border py-2 px-3 text-grey-800" type="dni" name="dni" id="dni">
</div>
<div class="flex flex-col mb-4">
<label class="mb-2 font-bold text-lg text-gray-900" for="password">Password</label>
<input class="border py-2 px-3 text-grey-800" type="password" name="password" id="password">
</div>
<button class="block bg-green-400 hover:bg-green-600 text-white uppercase text-lg mx-auto p-6 rounded"
type="submit">Save</button>
</form>
</div>
</section>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
},
store: function () {},
update: function (id) {}
}
</script>
Doe somebody see what the error is? I´m little new mixing this two frameworks.
1 answers
solution1
0 2021-10-31 12:50:12
My best guess is that due to the way Vue would work with SRS (Server Side Rendered) content, this would require Runtime Compiler to be enabled:
https://cli.vuejs.org/config/#runtimecompiler
This is because the SRS content served by Laravel is out of scope of your compiled Vue application, ie the custom HTML tag for your component <people-form-component> is not compiled into a view processed in content served by the application it's self but served by an external source (Laravel).
With the runtime compiler configuration enabled, Vue would scan the SRS content on page load.
Side node: If you are AJAX requesting SRS HTML content, that would require you to write some logic to trigger Vue to parse the response.
Personally I have never used SRS with Vue, only Laravel as an API and Vue PWA's (Progressive Web Applications).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.