How to execute javascript in compiled view file (using View::render method)

Question

is it possible to execute javascript code from a compiled view? i need to write some js codes inside my index.blade file to handle some events. i tried 3 way but none of them work.

Controller.

 $advertisements = Advertisement::get();
  $view = View::make('test::admin/index',['advertisements'=> $advertisements]);
  $html = $view->render();
  return $html;

index.blade.php

@push('stackscript') // NOT WORKING
<script>
  alert();
</script>
@endpush

<script>    // NOT WORKING
  alert();
</script>

@section('footer_script')  // NOT WORKING
<script>
  alert();
</script>
@endsection
<div class="row">
  @foreach ($advertisements as $advertisement)
    <div class="col-md-9">
    <div>{{ $advertisement->title }}</div>
    <div>{{ $advertisement->body }}</div>
    <div><img src="{{asset($advertisement->image)}}"></div>
  </div>
  <div class="col-md-3">
  <form id="plugin-advertisement" method="POST"  action="{{route('plugin.delete-advertisement', $advertisement->id)}}">
    @csrf
    @method("DELETE")
      <button class="btn bnt-sm btn-outline-danger">delete</button>
    </form>
  </div>
    @endforeach
</div>

Vue component

window.axios.get(this.url)
    .then((res) => {
    this.pluginPanel = res.data;
});

template:
<div v-if="!loading" v-html="div(pluginPanel)" />

score 0 · Answer 1 · edited Aug 15 '20 at 11:26

You have to use the JavaScript in the Vue Component your loading so not in your blade file. See code below:

As you can see there is a script tag in this Vue component. Here you can write your JavaScript code and it will be used when your render this Vue Component to your blade file.

<template>
        <div class="flex-center position-ref full-height">
            <div class="content">
                <div class="title m-b-md">
                    Welcome to Vue.js on Laravel
                </div>
                <div class="links">
                    <a href="https://laravel.com/docs">View Laravel Docs</a>
                    <a href="https://vuejs.org/v2/guide/">View Vue Docs</a>
                    <a href="https://laracasts.com">Watch Videos</a>
                </div>
            </div>
        </div>
    </template>
    <script>
        export default {}
    </script>
    <style scoped>
        html, body {
            background-color: #fff;
            color: #636b6f;
            font-family: 'Raleway', sans-serif;
            font-weight: 100;
            height: 100vh;
            margin: 0;
        }

        .full-height {
            height: 100vh;
        }

        .flex-center {
            align-items: center;
            display: flex;
            justify-content: center;
        }

        .position-ref {
            position: relative;
        }

        .top-right {
            position: absolute;
            right: 10px;
            top: 18px;
        }

        .content {
            text-align: center;
        }

        .title {
            font-size: 84px;
        }

        .links > a {
            color: #636b6f;
            padding: 0 25px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .1rem;
            text-decoration: none;
            text-transform: uppercase;
        }

        .m-b-md {
            margin-bottom: 30px;
        }
    </style>

In your app.js now link the component to the right element in your blade file. This goes as follows:

app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('welcome', require('./components/Welcome.vue'));

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

In your index.blade.php

    <body>
        <div id="app">
            <welcome></welcome>
        </div>
        <script type="text/javascript" src="js/app.js"></script>
    </body>

score 0 · Answer 2 · answered Aug 04 '21 at 14:57

All three of your ways need a layout file which has the core HTML.

Layout file master.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="csrf-token" content="{{ csrf_token() }}" />
        <title>Test to render JavaScript</title>
    </head>
    <body>
        @stack('stackscript') //You render JavaScript - first way
        @yield('footer_script') //You render JavaScript - third way
    </body>
</html>

In index.blade.php, you should code as below.

<!-- resources/views/layouts/app.blade.php -->
@extends('layouts.master')//You must have this line to extend layout.
@push('stackscript') //I hope this script will run
<script>
  alert();
</script>
@endpush

<script>    //I hope this script will run
  alert();
</script>

@section('footer_script')  //I hope this script will run
<script>
  alert();
</script>
@endsection
<div class="row">
  @foreach ($advertisements as $advertisement)
    <div class="col-md-9">
    <div>{{ $advertisement->title }}</div>
    <div>{{ $advertisement->body }}</div>
    <div><img src="{{asset($advertisement->image)}}"></div>
  </div>
  <div class="col-md-3">
  <form id="plugin-advertisement" method="POST"  action="{{route('plugin.delete-advertisement', $advertisement->id)}}">
    @csrf
    @method("DELETE")
      <button class="btn bnt-sm btn-outline-danger">delete</button>
    </form>
  </div>
    @endforeach
</div>

How to execute javascript in compiled view file (using View::render method)

2 Answers2