Reputation: 351
I'm using vue js on laravel, i have two different file app.js and app-filter.js in my resource/js folder
what i want is to call the app-filter.js on specific page but the app js is always called for each page:
in my app-filter.js i have
const filter = Vue.component('filter-project', require('./components/filter-project.vue').default);
const appfilterproject = new Vue({
el: '#app-filter-project',
components: {
'filter-project': filter
}
});
and in my app.js i
const app= new Vue({ el: '#app', components: { 'other-component': othercomponent } });
so in my page when i call app-filter i have these import
<script src="{{ asset('front/js/app-filter-project.js') }}"></script>
<script src="{{ asset('front/js/app.js') }}" defer></script>
the order is respective
and in my page i call
<div id="app">
<other-component></other-component>
</div>
<div id="app-filter-project">
<filter-project></filter-project>
</div>
the two component are showed in the page but on my devtools it show only my other-component
and any event on filter-project component not work , if i remove app.js from import, all thing work well
Upvotes: 0
Views: 407
Reputation: 1
Probably you are using Vue 3 and it is only supported by Vue.js devtools Beta, try to install it and reopen your browser
Upvotes: 0