How to add a Vuejs component to a Laravel Spark application?

Question

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

My first attempt failed because I simply tried to create a new div within the home view and bind my Vue code to that div. Here is the 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 were the words "This is a test" appear within that div on the home screen, but of course nothing appeared because, as mentioned, Vue gets bound to a div immediately after the body tag (well, I'm assuming that's why anyway).

I think the solution to my problem is to use Vue components, which themselves look fairly straightforward, but I have no idea where to put my code, how to integrate my code with the Gulp process, which Spark file I need to modify (if any?) to register my component and how to ensure that my component gets registered before the Vue instance gets created.

Any help would be much appreciated.

Addendum 1

To reproduce the exact same set-up as I'm using, one would need to install a fresh copy of Laravel 5.2, then use the spark installer to add the spark stuff, then add app.js containing the code below to the public folder, add the corresponding div anywhere in the home view and add a script tag to include app.js right below the script tag that imports the main javascript file produced by gulp.

Whilst it is impractical to reproduce that entire setup in a fiddle, I think the following fiddle illustrates the essence of the problem:

https://jsfiddle.net/5oLLte2e/

From memory you have the same limitation in AngularJS. It is completely reasonable to me why this wouldn't work and the solution in Vuejs is most likely to use components, but the challenge in this situation is knowing how to bundle the component and where to save it in order to integrate it with the gulp config, or if that is even necessary.

Answer 1

Vuejs Components

If you want to have more than one vue instance the short answer is: yes, you need components.

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

And the scripts will have to be loaded components first:

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'
  }
});

The output will be:

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

Here is the fiddle: Components with Vue

Remember that you can always put the template in the page using a unique id or, more idiomatically using something like:

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

---

Laravel Spark Integration

The steps to adding a component within a Sparkified Laravel application are as follows:

(1) Add the placeholder HTML with the custom tag anywhere on the page, even if a surrounding div has already been Vue-ified. The HTML with the custom component might look like this:

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

(2) Implement the Vue component and save the JavaScript file in resources/assets/js. By way of example, we might save the following code as 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) Add one require statement (the second line below) to the code in resources/assets/js/app.js so that the file looks like this:

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

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

Note that it is super-important to include the leading ./ in front of the filename, otherwise Browserify will assume it is looking for a npm module instead of a raw file and will fail.

(4) Run gulp and once it has finished, refresh the page. Gulp will call Browserify, which processes resources/assets/js/app.js, which now includes our custom JavaScript to be processed and included in the final public/js/app.js file.

If you carry out these steps on a clean Laravel installation that has had the Spark installer treatment (I made my mods to home.blade.php), you should see the sample text appear on the page.