I have a Laravel 5.3 project based on Laravel Spark 2.0. I'm trying to upgrade Spark to 3.0 and Vue.js to 2.0 following the upgrade guide.
I've added "laravel/spark": "~3.0" to my composer.json and it updated correctly. After that I added the following packages to package.json and they were installed without problem:
"laravel-elixir": "^6.0.0-11",
"laravel-elixir-vue-2": "^0.2.0",
"vue": "~2.0.1"
Also modified my gulpfile.js to add laravel-elixir-vue-2
Then I compiled my assets with Gulp and no errors were thrown, but when I go to the app, a blank page is shown and the console shows the following error:
[Vue warn]: Failed to mount component: template or render function not defined.
(found in root instance)
InvalidStateError
vue-migration-helper
My Vue files are located in resources/assets/js/ having an structure like this:
resources/assets/js/
--components/ **here I have custom components.
--spark/
--spark-components/
I ran the vue migration helper over those folders and fixed most of the warns. Only those related to global events were left.
This is how my gulpfile.js looks like:
var elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
require('laravel-elixir-livereload');
elixir(function(mix) {
mix.sass('app.scss')
.browserify('app.js', null, null, { paths: 'vendor/laravel/spark/resources/assets/js' })
.copy('node_modules/sweetalert/dist/sweetalert.css', 'public/css/sweetalert.css')
.copy('bower_components/iCheck/skins/minimal/_all.css', 'public/css/iCheck.css')
.copy('bower_components/iCheck/icheck.min.js', 'public/js/icheck.min.js');
mix.styles([
'resources/assets/vendor/bootstrap/css/bootstrap.css',
'resources/assets/vendor/animate/animate.css',
'resources/assets/vendor/font-awesome/css/font-awesome.css',
], 'public/css/vendor.css', './');
mix.scripts([
'resources/assets/vendor/metisMenu/jquery.metisMenu.js',
// 'resources/assets/vendor/slimscroll/jquery.slimscroll.min.js',
'resources/assets/vendor/pace/pace.min.js'
], 'public/js/vendor.js', './');
mix.version(['css/app.css', 'js/app.js']);
mix.livereload();
});