如何在Laravel中的app.js中正确添加多个Vue组件

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.

Answer 1

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>