Laravel Project does not recognize my Javascript file

Asked

Viewed 1,055 times

4

This is the structure of my project:

inserir a descrição da imagem aqui

As you can see in the image above the app.js file is in the folder Assets/js

my app.js file looks like this;

//var urlUsers = 'https://randomuser.me/api/?results=10';
        var urlUsers = 'https://jsonplaceholder.typicode.com/users';
        new Vue({
            el: '#main',
            created: function() {
                this.getUsers();
            },
            data: {
                lists: []
            },
            methods: {
                getUsers: function() {
                    axios.get(urlUsers).then(response => {
                        this.lists = response.data
                    });
                }
            }
        });

The file to configure the Javascript files in the Laravel project is the webpack.mix.js

He’s like this;

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js([
  'resources/assets/js/vue.js',
  'resources/assets/js/axios.js',
  'resources/assets/js/app.js',
], 'public/css/app.js');

And the main page is like this;

<!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">

        <title>Laravel e Vue</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    </head>
    <body>
          <div id="main" class="container">
                    <div class="row">
                        <div class="col-sm-4">
                            <h1>VUEjs - AJAX axios</h1>
                            <ul class="list-group">
                                <li v-for="item in lists" class="list-group-item">
                                    @{{ item.name }}
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-8">
                            <h1>JSON</h1>
                            <pre>
                                @{{ $data }}
                            </pre>
                        </div>
                    </div>
            </div>
        <script type="text/javascript" src="{{ elixir('js/app.js') }}"> </script>
    </body>
</html>

My browser was to appear like this;

inserir a descrição da imagem aqui

but it’s showing up like this;

inserir a descrição da imagem aqui

Why is my project not recognizing the Javascript files or is it because the app.js file is programming logic error?

================================================================

This is my repository:

Click here to access the repository

This is the image that appears in the Powershell console log

inserir a descrição da imagem aqui

And I’m following this course here on youtube.

Click here to see the video lesson.

======================================================

is generating this error;

PS C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud> php artisan clear-compiled
PHP Warning:  require(C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud/vendor/autoload.php): failed to open stream: No such file or directory in C:\Users\wladimi
r\Desktop\php\laravel-vue-crud-master\laravel-vue-crud\artisan on line 18

Warning: require(C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud/vendor/autoload.php): failed to open stream: No such file or directory in C:\Users\wladimir\Des
ktop\php\laravel-vue-crud-master\laravel-vue-crud\artisan on line 18
PHP Fatal error:  require(): Failed opening required 'C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud/vendor/autoload.php' (include_path='C:\xampp\php\PEAR') in
 C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud\artisan on line 18

Fatal error: require(): Failed opening required 'C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud/vendor/autoload.php' (include_path='C:\xampp\php\PEAR') in C:\U
sers\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud\artisan on line 18
PS C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud> php artisan serve
PHP Warning:  require(C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud/vendor/autoload.php): failed to open stream: No such file or directory in C:\Users\wladimi
r\Desktop\php\laravel-vue-crud-master\laravel-vue-crud\artisan on line 18

Warning: require(C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud/vendor/autoload.php): failed to open stream: No such file or directory in C:\Users\wladimir\Des
ktop\php\laravel-vue-crud-master\laravel-vue-crud\artisan on line 18
PHP Fatal error:  require(): Failed opening required 'C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud/vendor/autoload.php' (include_path='C:\xampp\php\PEAR') in
 C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud\artisan on line 18

Fatal error: require(): Failed opening required 'C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud/vendor/autoload.php' (include_path='C:\xampp\php\PEAR') in C:\U
sers\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud\artisan on line 18
PS C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud>
laravel-5 vue.js

  • You have some error in the console?

  • Where the client’s root/public folder is closed in Laravel?

  • No error messages appear on the Google Chrome console, the folder is set to be the Assets/js I want to apologize if suddenly my answer is not compatible with the question, it is because I started studying PHP Laravel a little while ago.

  • Please preview my post again as I’ve made updates.

1 answer

1

The problem is that you are specifying an incorrect path within your file webpack.mix.js:

Your file is like this:

mix.js([
  'resources/assets/js/vue.js',
  'resources/assets/js/axios.js',
  'resources/assets/js/app.js',
], 'public/css/app.js');

Note that in the last line you put the app.js inside the folder css and not js as you call on your main page.

Right command:

mix.js([
  'resources/assets/js/vue.js',
  'resources/assets/js/axios.js',
  'resources/assets/js/app.js',
], 'public/js/app.js');

After that you will need to import the vue and the axios inside your file Resources/Assets/js/app.js:

import Vue from 'vue'
import axios from 'axios'

Done all this run the npm run dev again.

  • Greeting @Juniornunes , but still continue with the problem.

  • @wladyband gave a npm run again?

  • I’m not using npm run, but I did so, I ran npm run and then ran php Artisan serve, and even so continue with problem, I have a remark, when run on npm run dev it shows nothing, I already tried on port 8000, 8006 and 8080, but when I run php Artisan serves it shows me by port 8000, but it’s like this... it’s still in the same problem.

  • would you mind downloading my project and testing it locally? please.

  • @wladyband already identified the problem and managed to run locally, edited the answer from a look! I will "commit" the modifications I made.

  • I don’t know exactly where you changed, but it is generating an error when trying to run 'php Artisan serve', I did an update on my post could take a look please?

  • @wladyband make sure to run the composer install if it has not done so or composer update to update the dependencies.

Show 2 more comments

Browser other questions tagged laravel-5 vue.js

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