jeffreyway / laravel-elixir-vue

Laravel Elixir Vue integration.

Laravel Elixir Vue Integration

This package provides Webpack support for compiling .vue files in your Laravel Elixir 6 projects. Please note that, if using Laravel Elixir 5 or below, you don't want this package.

Step 1: Install

npm install laravel-elixir-vue --save-dev

Step 2: Gulpfile.js

var elixir = require('laravel-elixir');

require('laravel-elixir-vue');

elixir(function(mix) {
    mix.webpack('main.js'); // resources/assets/js/main.js
});

If you need help, here's a barebones starter example.

laravel-elixir-vue's Issues

Vue 2.0 support

As VueJS 2.0 is here its support would be nice to have.

Probably only vue and vue-hot-reload-api require update.

Error when using .vue file / Vue 2.0.0-alpha.8

I installed a fresh copy of the Laravel 5.3 branch, installed all NPM Dependencies and run Gulp. But as soon as there is a .vue file ( e.g default installation ) Gulp throws an Error

{ [Error: ./~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Example.vue
Module build failed: Error: Cannot remove "babel-plugin-transform-es2015-modules-commonjs" from the plugin list.
...
...

I am using Vue 2.0.0-alpha.8

Update to vuejs 2.0.1

Please Update package.json to use with vue version 2.0.1

Future of vue-loader

Hi @JeffreyWay ,

Thanks for your great work with elixir 6.

Forgive me if I have misunderstood something or am jumping the gun: is the webpack component loader vue-loader on which this package is based deprecated?

The vue-loader-example repo states:

"Deprecated in favor of vue-cli and webpack vue-cli template."

Is the plan to move to using vue-cli under the hood for template compilation?

Cheers,

Tom

Importing an ES6 .js module into a .vue file works incorrectly with Elixir 6

See https://laracasts.com/discuss/channels/vue/importing-an-es6-js-module-into-a-vue-file-fails-with-elixir-6 for the details.

Essentially, if import Thing from './Thing.js';, Thing is { default: Thing }.

Templates not rendering in blade (v5.3)

I tried this package on v5.3 it didn't work. However it works very well on 5.2. Any particular reason why? I used the example component that v5.3 came with. Vue devtools shows that the component was registered - without error, yet the template does not show in blade.

Would be love to have this on the Laravel github instead of your "private" :)

for new people it would be nice if all "laravel" stand for, should be on the Laravel github.

Changes to babel presets

Not sure what exactly is going on, but I've been fighting bugs all morning.

I installed a fresh copy of Laravel 5.3, installed npm modules, and ran gulp.. The following is the resulting error..

[17:47:20] Starting 'webpack'...
{ [Error: ./~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Example.vue
Module build failed: Error: Cannot remove "babel-plugin-transform-es2015-modules-commonjs" from the plugin list.
    at Object.<anonymous> (/home/vagrant/Code/test.dev/node_modules/babel-preset-es2015-webpack/index.js:35:11)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:20:19)
    at /home/vagrant/Code/test.dev/node_modules/babel-core/lib/transformation/file/options/option-manager.js:324:15
    at Array.map (native)
    at OptionManager.resolvePresets (/home/vagrant/Code/test.dev/node_modules/babel-core/lib/transformation/file/options/option-manager.js:305:20)
 @ ./resources/assets/js/components/Example.vue 2:17-130
 @ ./resources/assets/js/app.js]
  message: './~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Example.vue\nModule build failed: Error: Cannot remove "babel-plugin-transform-es2015-modules-commonjs" from the plugin list.\n    at Object.<anonymous> (/home/vagrant/Code/test.dev/node_modules/babel-preset-es2015-webpack/index.js:35:11)\n    at Module._compile (module.js:413:34)\n    at Object.Module._extensions..js (module.js:422:10)\n    at Module.load (module.js:357:32)\n    at Function.Module._load (module.js:314:12)\n    at Module.require (module.js:367:17)\n    at require (internal/module.js:20:19)\n    at /home/vagrant/Code/test.dev/node_modules/babel-core/lib/transformation/file/options/option-manager.js:324:15\n    at Array.map (native)\n    at OptionManager.resolvePresets (/home/vagrant/Code/test.dev/node_modules/babel-core/lib/transformation/file/options/option-manager.js:305:20)\n @ ./resources/assets/js/components/Example.vue 2:17-130\n @ ./resources/assets/js/app.js',
  showStack: false,
  showProperties: true,
  plugin: 'webpack-stream',
  __safety: { toString: [Function: bound ] } }

Here are some related issues.

Related issue #1: gajus/babel-preset-es2015-webpack#10
Related issue #2: gajus/babel-preset-es2015-webpack#14

I've created a pull request which I believe resolves this.

Import doesn't work in .vue file

With Laravel 5.3 and the new elixir version using webpack, I have the following issue.

If I put the following code in my app.js, it works fine.

import square from './components/utils/test.js';
alert(square(2));

If I put the same code in my example.vue code, it doesn't work.

<script>
    import square from './utils/test.js';
    alert(square(3));

    export default {
        ready() {
            //alert(square(2));
            console.log('Component ready.')
        }
    }
</script>

Support for Vue 2.0

Already upgrading in my non-Elixir apps, but can't with Elixir right now. :(

Specifying style language in vue templates

In my .vue template I am trying to specify the style language as per v5:

<style lang="sass">
</style>

However elixir 6 gives this error:

ERROR in ./resources/assets/js/components/Foo.vue
Module not found: Error: Can't resolve 'sass' in '/full/path/to/resources/assets/js/components/Foo'
 @ ./resources/assets/js/components/Foo.vue 2:0-205

Do I need to pull in another module, configure the vue-style-loader for sass, or is this currently unsupported?

Thanks