Non SPA Laravel + VueJS Help Needed

So, here I am again. Came back to Vue after trying everything else to sprinkle in "reactivity" and UX-ness to my pages. Tried already Vanilla, jQuery, AlpineJS, Livewire to sprinkle in the goodness. VueJS is great and just as easy as everything else mentioned in my previous sentence. But the huge library of ready components found online makes developing front-end stuff fast and easy with Vue and you don't have to reinvent the wheel for simple stuff. I need a pro's experience for the following scenario.

// layouts/base.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title')</title>

    <!-- Styles -->
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    @yield('content')
    <script src="{{ mix('js/manifest.js') }}" defer></script>
    <script src="{{ mix('js/vendor.js') }}" defer></script>
    <script src="{{ mix('js/app.js') }}" defer></script>
</body>
</html>

The above file is loaded by all my pages except the Auth pages (these load layouts/guest.blade.php)

I'm in a situation where every single page requires a different Vue Component here and there. Not for silly stuff like opening a sidebar, but for stuff like a tickets page. Where you have a page to view the ticket and reply. That reply area is a view component that also loads sub-components eg a nice search-as-you-type dropdown. Another page or even the previous page example, my have a "chat widget" hanging about. Or simple switches to turn on/off settings.

My question is: Should I use one single app.js that is loaded on every page with a global <div id="app">@yield('content')</div> that imports every component regardless if individual pages make use of that component OR should I create many *.js (tickets-page.js, posts-page.js, etc.) that load only the required components for that particular page? My main concern is file download size and if by using a single app.js that globally registers the components I will get a huge app.js file and/or {manifest|vendor}.js file.

Does my question make sense? Sorry if it was asked before I haven't found it. Feel free to delete my post and point me to the thread where it was asked before.

P.S. I can't use SPA even if it is SSR. When I'm having trouble figuring the simple stuff above image I have to setup SPA and SSR.

martinbean

5 years ago

Best Answer

Level 80

@laracastsluvr You can use a Webpack feature called “lazy loading”, where you define all of the components in your app.js, but Webpack that splits them out into their own files and only loads them as and when they’re required. So your base app.js script stays quite slim, and then any components needed for a particular page are loaded on-demand using AJAX.

The syntax for that looks like this:

// resources/js/app.js

import Vue from 'vue';

Vue.component('live-chat', () => import (/* webpackChunkName: "js/chunks/live-chat.js" */ './components/LiveChat.vue'));

Vue.component('tickets-manager', () => import (/* webpackChunkName: "js/chunks/tickets-manager.js" */ './components/TicketsManager.vue'));

new Vue().$mount('#app');

You don’t need to do anything else with your components. If these components have sub-components, they’ll be resolved.

1 like

laracastsluvr

5 years ago

Level 4

Very nice! Seems to be an exact solution to my problem. I can see in devtools network the various dir_folder_ComponentName_vue.js files being loaded for each individual page and only if used in that page.

Are there any gotchas using Lazy loading?

Also, this might be off-topic, is the static content between the <div id="app"> content + components + more content </div> available to search engines' crawlers or does Vue take over everything inside the root element?

example:

<div id="app">

	<h1>Nice Heading</h1>
	<p>Lorem ipsum content... really nice content</p>

	<a-vue-component></a-vue-component>

	<p>More lorem ipsum...really juicy stuff</p>

	<another-vue-component></another-vue-component>

	// etc...
</div>

Seems logical that a search crawler would "See" the non-vue-component stuff but I can't seem to find an answer to this also.

martinbean

5 years ago

Level 80

@laracastsluvr Not sure of any gotchas. I’ve used it a couple of times and it works alright.

And yeah, the content in your #app div will be available in search engines as it’s still raw HTML, so you won’t lose any SEO benefit by mounting a Vue app to that div.

1 like

laracastsluvr

5 years ago

Level 4

Thanks! I was stuck for hours and you gave a very precise answer to my problem that solved it.

Just one more thing.

After my app.js, which we established will lazy load components, do I have to lazy load sub-components inside those main lazy loaded components? For example, a CreateNewTicket component will make use of lets say vue-multiselect (which is a real 3rd part component) and other 1st party tiny components. Will those be bundled in the lazy-loaded component js files?

...and a second thing.

Will state management be a problem with lazy loaded "parent" components?

Please or to participate in this conversation.