Laravel/VueJS - Multiple components inside blade not working properly

Question

As the title says it all, I will still guide you to reproduce the issue. Details are below.

Steps to reproduce

Clone Laravel official project from Github
Install all dependencies of Php and JavaScript (Node)
- npm install - for node
- composer install - for php

After installing all dependencies

Open up resources/views/welcome.blade.php and edit it to the following code below

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mix</title>

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>

<body>

<div id="app">
  <h1>Hello, world!</h1>

  <example-component />
  <camel-case-component />
</div>

<script src="{{ mix('js/app.js') }}"></script>

</body>

</html>

Open up resources/js/app.js and edit it to the following code below

require('./bootstrap');

window.Vue = require('vue');

Vue.component('camel-case-component', require('./components/CamelCaseComponent.vue').default);
Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app'
});

Note: Do not forget to add the file resources/js/components/CamelCaseComponent.vue

Run the laravel mix, npm run dev
Serve your app, php artisan serve and open it using any browser http://127.0.0.1:8000/

That's it. Minimal modification only.

What does "not working properly" mean? Are you seeing errors in either your logs or the browser console? Also, what is CamelCaseComponent.vue? — it's not part of the Laravel package that I have ever seen, and I don't see it in the official repo link you posted. — matticustard
– matticustard, Commented Aug 28, 2019 at 2:40
Have you tried to reproduce the issue? To answer you, I don't see any errors from console and from vue tools it only shows one component (which is the example-component since it is the first component typed) CamelCaseComponent.vue is something you will create. See the **Note: ** under number 2. — SMPLYJR
– SMPLYJR, Commented Aug 28, 2019 at 3:27
Yes, I saw the note, but "add" is an ambiguous term — add from where? It's seems you really meant "create." I am unable to reproduce your issue. From what you have said, Laravel is loading the page and Vue is loading the example component. This means the only thing not loading is your custom component, right? Can you post the contents of your CamelCaseComponent.vue file? — matticustard
– matticustard, Commented Aug 28, 2019 at 4:07
Oh, my mistakes. CamelCaseComponent.vue can contain anything, let's say a dummy text. On a side note, try to re-arrange them. Insert the CamelCaseComponent first then followed by ExampleComponent. You will see, CamelCaseComponent will load but ExampleComponent will be missing. — SMPLYJR
– SMPLYJR, Commented Aug 28, 2019 at 5:19

Izhan Yameen Baig · Accepted Answer · 2019-09-25 09:43:39Z

10

+50

Try this

<example-component></example-component>
<camel-case-component></camel-case-component>

Instead of

<example-component /> 
<camel-case-component />

I used closing tags for each component instead of self-closing tag.

answered Sep 25, 2019 at 9:43

Izhan Yameen Baig

1513 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marten Over a year ago

Not sure why, but this works! Both components are shown when using the closing-tag instead of a self-closing tag.

Nick Over a year ago

Read more vuejs.org/v2/style-guide/…

tony19 · Accepted Answer · 2022-07-15 21:09:21Z

6

HTML

So the problem is that HTML does not allow custom elements to be self-closing. Only "official void" elements can use self-closing; <link href="style.css" /> for example.

Because blade templates need to be valid HTML you should change it to

<example-component></example-component>
<camel-case-component></camel-case-component>

Vue Templates

Vue templates are parsed, so they don't need to adhere to the official HTML syntax. Vue actually recommends to use self-closing tags in other Vue components.

So having

<example-component />
<camel-case-component />

In a Vue template would be totally fine.

For more details about this you can check out the official Vue documentation

edited Jul 15, 2022 at 21:09

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 11, 2020 at 10:25

Dirk Hoekstra

1,07114 silver badges19 bronze badges

Collectives™ on Stack Overflow

Laravel/VueJS - Multiple components inside blade not working properly

Steps to reproduce

After installing all dependencies

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Steps to reproduce

After installing all dependencies

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related