My Laravel project does not see my Javascript file

Asked

Viewed 314 times

0

The structure of my project is like this:

inserir a descrição da imagem aqui

The main layout page is this, this is where I get the file Vue, Axios and the app:

<!DOCTYPE html>
<html lang="pt-br">
<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>Administração de Imóveis</title>

     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style>
         body { padding-top: 70px; }
     </style>
 </head>

 <body><!--O id do Vue.JS -->
<div>
         <nav class="navbar navbar-default navbar-fixed-top">
             <div class="container">
                 <div class="navbar-header">
                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                         <span class="sr-only">Toggle navigation</span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
                     <a class="navbar-brand" href="#">Início</a>
                 </div>
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="">Todos</a></li>
                         <li><a href="">Apartamentos</a></li>
                         <li><a href="">Casas</a></li>
                         <li><a href="">Kitnet</a></li>
                     </ul>
                 </div>
             </div>
         </nav>
         <div class="container">
             @yield('content')
         </div>

 </div>
 <script src="{{asset('lib/vue/dist/vue.js')}}"></script>
 <script src="{{asset('lib/axios/dist/axios.js')}}"></script>
<script src="{{asset('lib/axios/jquery/dist/jquery.js')}}"></script>
 <script src="{{asset('lib/app.js')}}"></script>
 </body>
</html>

This is the page 

@extends('app')

@section('content')

      <div id="crud" class="row">
          <div class="col-xs-12">
                <h1 class="page-header">Lista de Imoveis</h1>
          </div>

          <div class="col-sm-7">
              <a href="#" class="btn btn-primary pull-right">Novo  Imovel</a>

              <table class="table table-hover table-striped">
                  <thead>
                        <tr>
                          <th>Id</th>
                          <th>Descrição</th>
                          <th colspan="2">&nbsp</th>
                        </tr>
                  </thead>
                  <tbody>
                    <tr v-for="dado in dados" >
                      <td width="10px">1</td>
                      <td>descrição</td>
                      <td width="10px">
                          <a href="#" class="btn btn-warning btn-success">Editar</a>
                      </td>
                      <td width="10px">
                          <a href="#" class="btn btn- btn-danger">Eliminar</a>
                      </td>
                    </tr>
                  </tbody>
              </table>
          </div>
          <div class="col-sm-5">
            <pre>
              @{{ data }}
            </pre>
          </div>

      </div>
@endsection

I wonder where I went wrong?

laravel-5 vue.js

  • Check and an error appears in the browser console. There is the lib folder inside resources/assets?

  • Maybe the problem is not this @Andréluizdegusmão. From what I understand of Laravel, the files should be inside the folder public/js. It would not be the case that AP did not run Gulp or npm?

  • What is the version of Laravel?

1 answer

2

Browser will not be able to read the Assets in the folder resources, and yes the files in the folder public.

You should understand that the assests of the folder resources are used so that you can better organize your project, and that Laravel in turn uses by default the Laravel Mix to compile, minify or merge records, which will be sent to the folder public.

If you want to use the files directly, just put them in the folder public, but depending on the project will be better working with the features offered by the Laravel Mix mentioned above.

Worth a read on the link.

Browser other questions tagged laravel-5 vue.js

You are not signed in. Login or sign up in order to post.