Laravel and VueJS - where\how to put instance and components

Question

I have a simple, probably silly doubt about this basic thing using Vue not for an SPA:

Considering that Vue in my project is used to make small pieces interactive (tables, lists), and general filtering of database records, should I create a Vue instance for every component and add <div id="app"> in the places I need those things

...
<body>
....
<div id="nav">...
....
<div id="app">
 <component></component>
</div>

app.js

const table = new Vue...
const calendar = new Vue...

Or should I make a generic #app div right after the body tag, containing all the site and, inside that, inserting the single components to then manage everything in a single new Vue instance?

<body>
<div id="app">
 <div id="nav>....
 </div>
 <div id="anotherDiv">
 ...
 ...
 </div> <!-- #app div -->
 </body>

app.js

const app = new Vue...

Shawn · Accepted Answer · 2018-10-29 01:11:19Z

3

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.

answered Oct 29, 2018 at 1:11

Shawn

881 silver badge7 bronze badges

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

1 Comment

K3nzie Over a year ago

As long as it's good practice, I'm up for it! I wanna be sure to use Vue correctly

eResourcesInc · Accepted Answer · 2018-10-29 01:11:54Z

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.

Therichpost · Accepted Answer · 2018-10-29 07:55:16Z

1

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

answered Oct 29, 2018 at 7:55

Therichpost

1,8132 gold badges15 silver badges19 bronze badges

Collectives™ on Stack Overflow

Laravel and VueJS - where\how to put instance and components

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related