CODEWITHSUNDEEP
phplaravelimportlaravel-bladelumen
ImFireblade
ImFireblade

Reputation: 115

How do i import libraries in a blade file on lumen?

So i have this php.blade view that i want return with lumen.

layout.blade.php

    <head>
    <!--AXIOS-->

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

     <!--JQUERY-->

     <script src="{{ asset("libraries/go-debug.js") }}"></script>
     <script src="{{ asset("libraries/jquery-3.2.1.min.js") }}"></script>



     <!--MATERIALIZE-->

     <link type="text/css" rel="stylesheet" href="{{ asset("libraries/materialize/css/materialize.min.css") }}"  media="screen,projection"/>
     <script type="text/javascript" src="{{ asset("libraries/materialize/js/materialize.min.js") }}"></script>

     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

     <!--ICONE MATERIALIZE-->

     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

     <!--CSS IMPORTATO-->
    <link type="text/css" rel="stylesheet" href="{{ asset("loginPage/login.css") }}">


    @yield('head')

    </head>

     <body>
           @yield('body')
     </body>
    </html>

login.blade.php

@extends('layout')

@section('imports')
    <title>Login Page</title>
@stop

@section('body')
    <script src="{{ asset("loginPage/login.js") }}"></script>
    <!--NAVBAR-->
    <nav>
        <div class="nav-wrapper">
            <a href="#" class="brand-logo center">Logo</a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a href="index.html"><i class="material-icons" style="font-size:36px;">home</i></a></li>
            </ul>
        </div>
    </nav>

    <div class="row">
        <div class="col s12 m2" id="center">
          <div class="card">
            <div class="card-image">
              <img src="image/logo.jpg" class="responsive-img" id="logo" style="width:200px; height:200px;">
              <span class="card-title">Card Title</span>
            </div>
            <div class="card-content">
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
              <div class="fb-login-button" data-width="">
              </div>
            </div>
            <div class="card-action">
            </div>
          </div>
        </div>
      </div>
@stop

In this view as you can see im trying to import libraries like materialize ,css and js scripts.

The problem is that lumen cannot find this files in his path and they cannot even be called via internet.

Here's a pic of the path

enter image description here

How can i resolve this?

Upvotes: 0

Views: 2355

Answers (1)

Alessandro.Vegna
Alessandro.Vegna

Reputation: 1262

As far as I know, all the resources must be inside the public folder.

e.g.

public/js/libraries/jquery-3.2.1.min.js

After that you move them, you change your code as per follow:

layout.blade.php

<script src="{{ asset("js/libraries/jquery-3.2.1.min.js") }}"></script>

NB, in your case you have to move under public:

  • libraries
  • bootstrap
  • loginpage

If instead, you have your own scss or js to compile have a look here: https://laravel.com/docs/5.6/mix

EDIT

Lumen does not provide the asset helper function you may want to use url e.g.

<script src="{{ url("js/libraries/jquery-3.2.1.min.js") }}"></script>

if you want you can create your own asset helper function of course, have a look here:

https://laracasts.com/discuss/channels/lumen/extend-helper-functions-to-lumen?page=0

or

How to do {{ asset('/css/app.css') }} in Lumen?

Upvotes: 4

Related Questions