1

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();
});
levis
  • 367
  • 7
  • 17

0 Answers0