Level 20
Could you post the whole layouts and an example of a child ?
Jun 19, 2018
19
Level 2
How to extend javascript from master layout to child layout ?
The Default layouts.app.blade.php has
<script src="{{ asset('js/app.js') }}" defer></script>
I want to use this in child blades. But its not working. When is use
@extends('layouts.app')
in child blade .
But when I use HTML in the child as well i am able to use it
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
So how to use javascript in child blade?
Level 2
The layouts.app.blade is the default with every laravel project. I am using the same
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
then the
<body>
And the child blade is as post.index.blade.php is
@extends('layouts.app')
@section('content')
My contents .........
@endsection
I want to use VUE form, but enable to get the
<script src="{{ asset('js/app.js') }}" defer></script>
But without extending the master layout using HTML
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<div id="app-4">
<ol>
<li v-for="todo in todos">
<h4> @{{ todo.text }}</h2>
</li>
</ol>
</div>
VUE is working . But i want to reuse the master layout
Level 50
remove defer and try again
Level 67
also load your js in your footer, or just before </html>, not in the <head>
Level 2
No still it's not working. is there any special method to inherent JavaScript in child blade.
Level 67
What do you need to do in the "child blade" that you can't use the globally scoped js file?
If this is in your main tempate
<script src="{{ asset('js/app.js') }}"></script>
Then all views, subviews, subsubviews, etc, that extend that main template all have access to it.
The problem might be in your actual js code, and not where it's being loaded from.
Level 2
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<div id="app-4">
<ol>
<li v-for="todo in todos">
<h4> @{{ todo.text }}</h2>
</li>
</ol>
</div>
Is my vue J's code. From vue documentation with plan HTML I am getting the output.
Level 50
@abhishek did you put that at the end of body in your template?
layouts.app.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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
//your code
<script src="{{ asset('js/app.js') }}"></script> //script should be here
</body>
Level 67
Next step, is to show your actual script.
Level 2
I kept it above
</HTML>
as told earlier below ie after <\body>
Level 50
What is the name of your file layouts.app.blade.? or app.blade.php?
Level 67
looks like layouts.app.blade.php since he's using @extends('layouts.app') in his code
Level 2
Layouts is the folder with app.blade.php in it and my index.blade.php where I want to extend the app.blade.php is in post folder with name index.blade.php. except js all others like navbar, login button are working .
Level 20
How do you pass data ro the view ?
Not sure it come from app.js
Level 2
The path is
resources/assets/js/app.js
And in that I have add From vue documentation
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
});
Default laravel Vue.component('example-component',
Vue.component('example-component',
want the result to display in post.index.blade.php
@extends('layouts.app')
@section('content')
<div id="app-4">
<ol>
<li v-for="todo in todos">
<h4> @{{ todo.text }}</h2>
</li>
</ol>
</div>
@endsection
Where layouts.app is the default master page comes with every laravel project
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>
Level 50
your problem was with id app-4 you added it inside child template instead of parent. try this
@extends('layouts.app')
@section('content')
<div>
<ol>
<li v-for="todo in todos">
<h4> @{{ todo.text }}</h2>
</li>
</ol>
</div>
@endsection
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
</head>
<body>
<div id="app-4">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>
1 like
Level 2
@rin4ik thank you so much it worked .. but not how will i add multiple ids for many other vue component like app5, app6 , app8 for other pages using the same layout.app master layouts ships with laravel
Level 50
@abhishek it is a very bad idea of using many vue instances use components instead . take a look to my project how it is organized https://github.com/rin4ik/codetube/blob/master/resources/assets/js/app.js . only one root element with an id of app https://github.com/rin4ik/codetube/blob/master/resources/views/layouts/app.blade.php and inside all components
Level 2
@rin4ik hi, I went through your git hub link I could not find how you are using the components like <example-component></example-component> any of ur files.
Please or to participate in this conversation.