How to add Vuejs component to Laravel Spark app?

Question

I'm working on a Laravel 5.2 project with Laravel Spark (which is still in beta at the time of writing) and trying to add some Vuejs functionality using the default layouts and views.

My first attempt failed because I just tried to create a new one divin the home view and bind the Vue code to this div. Here div:

    <div id="my-stuff">
        <p>@{{ test }}</p>
    </div>

And here is the corresponding JS code:

new Vue( {
    el: '#my-stuff',
    data: {
        test: 'This is a test'
    }
});

What I expected to see is the words “This is a test” that appear in this div on the main screen, but of course nothing appeared, because, as already mentioned, Vue is attached to divimmediately after the body tag (well, I assume that one way or another).

, - Vue, , , , Gulp, Spark ( ?), , Vue.

.

1

, , Laravel 5.2, , app.js, , public, div home script, app.js script, javascript, gulp.

, , :

https://jsfiddle.net/5oLLte2e/

AngularJS. , , Vuejs, , , - , , Gulp config, .

Answer 1

Vuejs

vue , : yes, .

<div id="main-app">
<p>{{ mainMessage }}</p>
    <my-app>
        <p>Some composable content</p>
    </my-app>
</div>

:

Vue.component('my-app', {
  template: '<div>{{myMessage}}<br/><slot></slot></div>',
  data: function() {
    return {
      myMessage: 'This is my message'
    }
  }
});

new Vue( {
  el: '#main-app',
  data: {
    mainMessage: 'This is the main module'
  }
});

:

This is the main module
This is my message
Some composable content

: Vue

, , - :

<script type="x/template" id="my-app">
  Your template here
  {{ your component variables }}
</script>

---

Laravel Spark

Sparkified Laravel :

(1) HTML- , div Vue-ified. HTML :

<div id="example">
    <my-component></my-component>
</div>

(2) Vue JavaScript resources/assets/js. , my-component.js:

var MyComponent = Vue.extend({
    data: function() {
        return { message: 'This is a test' }
    },

    template: '{{ message }}'
})

Vue.component('my-component', MyComponent)

new Vue({
    el: '#example'
})

(3) require ( ) resources/assets/js/app.js, :

require('laravel-spark/core/bootstrap');
require('./my-component.js'); // This is the key!

new Vue(require('laravel-spark'));

, - ./ , Browserify , npm .

(4) gulp , . Gulp Browserify, resources/assets/js/app.js, JavaScript public/js/app.js.

Laravel, ​​ Spark ( home.blade.php), , .