[Vuejs]-Laravel and VueJS – where\how to put instance and components

It is probably easier to have a generic #app in your root div that will contain all of your site. Then if you want to add more components, then all you have to do is create a vue component and register it. To register a new component to your Vue instance you can use the following code where you create a main.js file.

Vue.component('your-component-name', require('PATH TO YOUR COMPONENT'));

After your component is registered you can use it anywhere in the #app body.

There are many things to consider here and all answers will be somewhat subjective, so keep that in mind. I don’t think that any single way is the “correct” way to do it. I have found that the simplest implementation is to have a single Vue instance in app.js, and then build your components and use them wherever you want in the app div. However, this can be overkill and may affect you negatively in a couple of ways.

As one example, if you are not 100% committed to using Vue, then it’s most likely that you also want to use jQuery and maybe even some jQuery plugins somewhere else in your app. jQuery and Vue do not play very nicely together unless you are instantiating the jQuery within Vue components. For this reason, if you plan to utilize other javascript libraries such as jQuery, then you might consider using individual instances of Vue with smaller scopes wherever you need to use a component.

If, however, you use Vue to help with some global tasks, such as line-clamping or truncating, then you really are best served by having a global install.

As far as other considerations, such as overhead, I believe that either method would probably just about be even. When you load globally, you get the benefit of browser caching even though the script is on each page. When you load page-by-page, you get the benefit of not having to load the scripts everywhere and only using them as you need them. In either case, overhead is pretty minimal for Vue on the modern web, so I don’t think this should play into your decision at all.
Those are my thoughts.

You can do like this:

// Imported components

import examplecomponent from ‘./components/ExampleComponent.vue’;

import adduser from ‘./components/AddUser.vue’;

and for call vue components in laravel view:

<div id="app">
   <examplecomponent ></examplecomponent>
</div>

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

For more basic information:
Laravel and VueJS – where\how to put instance and components