[Vuejs]-Hide other code in the app.js in the login page of a vue app

by

0👍

If you’re using Laravel mix, you can add a new entry point for your login script.

mix.js('resources/assets/app/js/app.js', 'public/app/js')
  .js('resources/assets/app/js/login.js, 'public/app/js);

So, you can add a @yield statement in your base layout to place scripts declared in the page view.

base.blade.php

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
        @yield('scripts')
    </body>
</html>

login.blade.php

@extends('layouts.base')

@section('title', 'Page Title')

@section('content')
    <p>This is my body content.</p>
@stop

@section('scripts')
    <script src="{{ mix('app/js/login.js') }}"></script>
@stop

Edited

For a SPA you can have another bundled entry point to just define the Login component:


Vue.component('login-form', {
  ... component code here
})

You can use vue-plugin-load-script to load the login.js script in the beforeEach method from Vue router. So the component will be available before render the login page.

router.beforeEach(async (to, from, next) => {
  if (to === 'login'){
    await Vue.loadScript('login entry point url here')
  }
  next();
});

Also, you can do it inside the page using the beforeMount hook. Here an example using a fake promise and entry point.

https://jsfiddle.net/7oj2sxun/3/

If you’re using Vue CLI, it already supports lazy loading with dynamic imports.

Here a detailed article:

https://blog.logrocket.com/lazy-loading-in-vue-js/

Leave a comment