CODEWITHSUNDEEP
laravelvue.jswebpack
drake24
drake24

Reputation: 525

How to compile .vue files inside Webpack Laravel

I'm new to webpack in Laravel. I already managed to compile the default scripts into one. However, when I tried to add a new Vue Controller in a separate folder, it seems it will not be included during npm run dev.

Currently I have this set-up

-assets
 --js
 ---app.js
 ---test.vue

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

This will work. However when I put test.vue inside a folder.

-assets --js ---app.js --controllers --test.vue

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

app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example', require('./components/Example.vue'));

Test.vue

var app = new Vue({
    el: '#app',
    data: {
            message:'Fight!',
            choice:'Awaiting choice',
            images: {
                imgBlue: '',
                imgRed: ''
            },
            votes: {
                blue: null,
                red: null
            }
    },
});

bootstrap.js

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

Any help would be appreciated.

Thanks!

Upvotes: 0

Views: 8243

Answers (1)

Alberto
Alberto

Reputation: 313

@drake24 In some environments (like mine), you must use:

npm run watch-poll

That should do the work, without adding .vue files to webpack.mix.js.

Upvotes: 3

Related Questions