How to properly add multiple Vue components in app.js in Laravel

Question

So, hi. I've been struggling for 4 hours to add at least two different Vue components to my app.js file which is located in js folder along with these vue components in my Laravel project.

I couldn't find any real solution on the internet since it didn't fix my problem.

I have tried something like

Vue.component('signature-element', require('./components/Signature.vue').default);

under the other component which works perfectly, but the problem is I can't make the app work with 2 or more components.

I've tried installing vue-router via npm and configuring a router but it didn't work too, somehow whole JS stopped without any errors in the command log in browser or in Mix.

I've also tried calling the import function instead of the first one I've mentioned, for example:

const componentVar = import ...;

inside vue:

    new Vue({
        components: { first, componentVar },
        mounted() {}
    });

But this also did not work unfortunately.

Where is first defined?

ceejayoz
– ceejayoz

2019-07-30 13:22:52 +00:00
Commented Jul 30, 2019 at 13:22 — ceejayoz
– ceejayoz, Commented Jul 30, 2019 at 13:22

Luca Rossi · Accepted Answer · 2019-07-30 13:45:22Z

5

In the second example you're trying to registrate locally your components.

If you want to do this you can do it like this:

import first from './components/first'
import componentVar from './components/componentVar'

new Vue({
  el: '#app',
  components: {
    'first': first,
    'componentVar': componentVar
  }
})

Instead if you want to use the first example this means you want to register your components globally. That means they can be used in the template of any root Vue instance (new Vue) created after registration

Example:

Vue.component('signature-element', { /* ... */ })

new Vue({ el: '#app' })

Then in your view

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

answered Jul 30, 2019 at 13:45

Luca Rossi

7761 gold badge6 silver badges19 bronze badges

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

1 Comment

FabricioG Over a year ago

Is there any "best practice" for either of these two?

Collectives™ on Stack Overflow

How to properly add multiple Vue components in app.js in Laravel

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related