Vue: How to deliver multiple components across multiple page Views

I've spent the afternoon Googling without much luck. Creating multiple components is not really what I am looking for. That is straight forward. So for example I would have component one on page one, and component two on page two etc. I already have one component installed. My real issue is what do I do about resources\app.js below such that i can deploy more pages.

import Vue from 'vue'
window.Vue = Vue;
require('./bootstrap');

window.bootstrapDatePicker = require('bootstrap-datepicker');


// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('front-page', require('./components/Front.vue').default);

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

I am specifically concerned what to do with this as I obvious must create a new ID for the new page.

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

BTW, I have also I have downloaded Vue with NPM.

Many thanks !!

tykus

4 years ago

Level 104

You need only one root Vue instance, and then can globally register components to use within the #app element (such as front-page above). Typically you can place that #app element in a layout Blade template that loads app.js and is used (extended) by each page.

// resources/js/app.js
Vue.component('front-page', require('./components/Front.vue').default);
Vue.component('other-page', require('./components/Other.vue').default);

// resources/layouts/main.blade.php
<div id="app">
		@yield('content')
</div>

// resources/pages/one.blade.php
@extends('layouts.main')
@section('content')
		<front-page />
@endsection

// resources/pages/two.blade.php
@extends('layouts.main')
@section('content')
		<other-page />
@endsection

vincej

4 years ago

Level 15

THANK YOU ! I have it working! It took me a little while to realise that you don't create you own template tags but rather rely upon the Vue generated tags ie

// Wrong! 
<pageTwo>
</pageTwo>

//Correct ! 
<page-two>
</page-two>

I hope this helps someone else as it is not easy to find for a total Vue Newb!

Cheers!

vincej

4 years ago

Level 15

@tykus Hi, Back again. I got diverted onto more urgent things.

Looking at your response above, this is not quite what I need. Your response stipulates that additional components are called from a single main layout page. What I want is to add Vue to existing Blade views ie not rely upon a single main layout. So, for example, view one makes use of the "front page" component , view two makes use of "registration" component, view three uses "child" component etc etc.

Any suggestions? Many Thanks !

Please or to participate in this conversation.