How to combine 2 VUE components in a Laravel blade if they can't be combined?

Question

Vue.js

The structure is standard, which Laravel offers by default.
Those. app.js includes all components.
And then the app connects

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

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

Then in the main Laravel template I include app

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

and then in the console, if there is no app, he (or it) writes
[Vue warn]: Cannot find element: #app2
to the speed does not affect, but how do you get rid of this? I need App2 for the second component on the same page, when they cannot be placed together in one component (for example, when in different places of the laravel template - in the header and in the footer at the same time). How to connect all this correctly?

Answer 1

It seems to me that there is not quite the right understanding of spa-applications. In theory, (if you do not rewrite the application from standard to reactive) - you should have one single entry point for mounting everything on the tree house and, accordingly, the only tag in the tree house. Everything axial is one big component, consisting of other components (which in turn can have a different state). Accordingly, it makes no sense to mount several components to different blocks, as you have done. I'm not familiar with vue.js myself, but I'm sure it's the same principle as in React and other reactive frameworks.

Answer 2

Include separate JS files with separate views for different blade templates.

Answer 3

I did the following -
1. Create a file resources\js\app2.js (copied app.js). In it we change el: '#app2', we include the necessary component files.
2. Create a file resources\sass\app2.scss (copied app.scss)
3. In the webpack.mix.js file, copy the following
mix.js('resources/js/app2.js', 'public/js')
. sass('resources/sass/app2.scss', 'public/css');
4. run npm run dev
app2 is ready to go, you can use it
Don't forget to include it in the template you need (where the div id="app2" will be placed)
well, directly using

<div id="app2">
     <example-component2></example-component2>
</div>